Sets or gets images count.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        count={8}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the rating widget is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        disabled={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets widget's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        height={50}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets rating item's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        itemHeight={30}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets rating item's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        itemWidth={20}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets vote precision.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        precision={0.5}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the user can vote single or multiple times.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        singleVote={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets current rating.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        value={3}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets widget's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
        width={300}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The change event is triggered when the rating is changed.

Code examples

Bind to the change event of jqxRating.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();  
  
  public render() {
    return (
      <JqxRating ref={this.myRating} onChange={this.onChange} 
       
      />
    );
  }
 
  private onChange(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disabling the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();
 
  public componentDidMount(): void {
    this.myRating.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enabling the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();
 
  public componentDidMount(): void {
    this.myRating.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Getting current rating value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();
 
  public componentDidMount(): void {
    this.myRating.current!.getValue();
  }
   
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Setting value to the rating widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();
 
  public componentDidMount(): void {
    this.myRating.current!.setValue(4);
  }
   
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the value.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxRating, { IRatingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxrating';
 
class App extends React.PureComponent<{}, IRatingProps> {
  private myRating = React.createRef<JqxRating>();
 
  public componentDidMount(): void {
    this.myRating.current!.val();
  }
   
  
  public render() {
    return (
      <JqxRating ref={this.myRating} 
       
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);