@rc-component/rate

_{Part of the Ant Design ecosystem.}

📦 ⭐ Accessible React rating component with half-star and keyboard support.

English | 简体中文

Highlights

• Controlled and uncontrolled rating values.
• Half-star selection, custom characters, and custom character rendering.
• Keyboard interaction, focus/blur methods, disabled state, and RTL support.
• TypeScript definitions for props and imperative refs.

Install

npm install @rc-component/rate

Usage

import Rate from '@rc-component/rate';
export default () => <Rate defaultValue={2.5} allowHalf />;

import Rate from '@rc-component/rate';
export default () => (
  <Rate
    count={5}
    defaultValue={3}
    character={({ index }) => index + 1}
    onChange={(value) => {
      console.log('selected', value);
    }}
  />
);

Examples

Run the local dumi site:

npm install
npm start

Then open http://localhost:8000.

API

Rate

Name	Type	Default	Description
allowClear	boolean	true	Clear the value when clicking the selected item again.
allowHalf	boolean	false	Enable half item selection.
autoFocus	boolean	false	Focus the rating on mount.
character	ReactNode | (props: StarProps) => ReactNode	'★'	Custom character for each item.
characterRender	(origin: ReactElement, props: StarProps) => ReactNode	-	Custom renderer for each item.
className	string	-	Additional class name.
count	number	5	Number of rating items.
defaultValue	number	0	Initial uncontrolled value.
direction	string	'ltr'	Layout direction. Use 'rtl' for right-to-left display.
disabled	boolean	false	Disable interaction.
id	string	-	Root element id.
keyboard	boolean	true	Enable keyboard control.
prefixCls	string	'rc-rate'	Prefix class name.
style	React.CSSProperties	-	Root style.
tabIndex	number	0	Root tab index.
value	number	-	Controlled value.
onBlur	() => void	-	Blur callback.
onChange	(value: number) => void	-	Value change callback.
onFocus	() => void	-	Focus callback.
onHoverChange	(value: number) => void	-	Hover value callback.
onKeyDown	React.KeyboardEventHandler	-	Keydown callback.
onMouseEnter	React.MouseEventHandler	-	Mouse enter callback.
onMouseLeave	React.MouseEventHandler	-	Mouse leave callback.

Ref

Name	Type	Description
blur	() => void	Remove focus from the rating.
focus	() => void	Focus the rating.

Development

npm install
npm start
npm test
npm run tsc
npm run compile
npm run build

The dumi site runs at http://localhost:8000 by default.

Release

npm run prepublishOnly

The release flow is handled by @rc-component/np through the rc-np command after the package build.

License

@rc-component/rate is released under the MIT license.