{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Rating component is usually used for customer feedback.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Rating\">Rating <a class=\"header-anchor scroll-count-item\" href=\"#Rating\" data-scroll-id=\"Rating\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>defaultValue</td>\n<td>Default value</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Value&#xFF08;controlled mode&#xFF09;</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size</td>\n<td>&apos;small&apos; | &apos;medium&apos; | &apos;large&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>count</td>\n<td>Full mark of rating</td>\n<td>number</td>\n<td>5</td>\n<td></td>\n</tr>\n<tr>\n<td>showGrade</td>\n<td>Display grade or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>allowHalf</td>\n<td>Allow half star or not</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>allowClear</td>\n<td>Whether to allow clear when click again</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback function on click star</td>\n<td>(value: number) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onHoverChange</td>\n<td>Callback function on hover star</td>\n<td>(value?: number) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview mode or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Render method when is preview mode.&#xFF08;Required when isPreview=true&#xFF09;<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: Score<br><em>props</em>: The props of rating<br><strong>return</strong>:<br>The render content when preview</td>\n<td>(value: number, props: RatingProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>readAs</td>\n<td>Custom display of grade<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>val</em>: Score value<br><strong>return</strong>:<br>Score label</td>\n<td>(val: number) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>type</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Up Arrow</td>\n<td style=\"text-align:left\">increase star rating</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Down Arrow</td>\n<td style=\"text-align:left\">decrease star rating</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">increase star rating</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">decrease star rating</td>\n</tr>\n</tbody>\n</table>\n"}