<p>React Rating componentsis a star based selection input.</p>
<h3 id="setup">Setup</h3>
<p>Refer to PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/setup">setup documentation</a> for download and installation steps for your environment.</p>
<h3 id="import">Import</h3>
<pre><code class="lang-js"><span class="hljs-keyword">import</span> { Rating } <span class="hljs-keyword">from</span> <span class="hljs-string">'primereact/rating'</span>;
</code></pre>
<h3 id="getting-started">Getting Started</h3>
<p>Rating is used a controlled input component with <strong>value</strong> and <strong>onChange</strong> properties.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span> =&gt;</span> setValue(e.value)} /&gt;
</code></pre>
<h3 id="number-of-stars">Number of Stars</h3>
<p>Number of stars to display is defined with <strong>stars</strong> property, default is 5.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span> =&gt;</span> setValue(e.value)} stars={5} /&gt;
</code></pre>
<h3 id="cancel">Cancel</h3>
<p>A cancel icon is displayed to reset the value by default, set <strong>cancel</strong> as false to remove this option.</p>
<pre><code class="lang-html"><span class="hljs-tag">&lt;<span class="hljs-name">Rating</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{(e)</span> =&gt;</span> setValue(e.value)} cancel={5} /&gt;
</code></pre>
<h3 id="theming">Theming</h3>
<p>Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the <a target="_blank" href="https://primefaces.org/primereact/showcase/#/theming">Designer</a> tool.</p>
<h3 id="resources">Resources</h3>
<p>Visit the PrimeReact <a target="_blank" href="https://primefaces.org/primereact/showcase/#/rating">Rating</a> showcase for demos and documentation.</p>


React Rating componentsis a star based selection input.

### Setup

Refer to PrimeReact [setup documentation](https://primefaces.org/primereact/showcase/#/setup) for download and installation steps for your environment.

### Import

```js
import { Rating } from 'primereact/rating';
``` 

### Getting Started

Rating is used a controlled input component with **value** and **onChange** properties.

```html
<Rating value={value} onChange={(e) => setValue(e.value)} />
```

### Number of Stars

Number of stars to display is defined with **stars** property, default is 5.

```html
<Rating value={value} onChange={(e) => setValue(e.value)} stars={5} />
```

### Cancel

A cancel icon is displayed to reset the value by default, set **cancel** as false to remove this option.

```html
<Rating value={value} onChange={(e) => setValue(e.value)} cancel={5} />
```

### Theming

Rating supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the [Designer](https://primefaces.org/primereact/showcase/#/theming) tool.

### Resources

Visit the PrimeReact [Rating](https://primefaces.org/primereact/showcase/#/rating) showcase for demos and documentation.
