Sets or gets the count property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} count={8}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} disabled={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} itemHeight={30}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} itemWidth={20}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the precision property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} precision={0.5}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the singleVote property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} singleVote={true}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the value property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35} value={3}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

The change event is triggered when the rating is changed.

Code examples

Bind to the change event of jqxRating.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRating.on('change', (event) => {
            // Do Something...
        });
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRating.disable();
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRating.enable();
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myRating.getValue();
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myRating.setValue(20);
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxRating from 'jqwidgets-react/react_jqxrating.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myRating.val();
    }

    render() {           
        return (
            <JqxRating ref='myRating'
                width={350} height={35}
            />
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));