react-component/rate

README

@rc-component/rate

_{Part of the Ant Design ecosystem.}

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

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.