{"id":14862,"library":"rc-rate","title":"React Star Rate Component","description":"rc-rate is a flexible and accessible React component for displaying and selecting star ratings. It is part of the extensive react-component ecosystem, known for providing foundational UI components. The package is currently at version 2.13.1 and actively maintained with frequent minor and patch releases, addressing bugs, accessibility, and adding features. Key differentiators include support for half-star selections, custom characters for stars (allowing SVG or any ReactNode), and robust keyboard navigation. It provides both controlled and uncontrolled modes of operation and ensures good accessibility practices, as evidenced by recent fixes. Developers can easily integrate it into projects that require user feedback or display ratings, with full TypeScript support provided. This component offers a solid, performant, and customizable base for rating functionalities in React applications, suitable for production use cases.","status":"active","version":"2.13.1","language":"javascript","source_language":"en","source_url":"https://github.com/react-component/rate","tags":["javascript","react","react-component","react-rate","rate","typescript"],"install":[{"cmd":"npm install rc-rate","lang":"bash","label":"npm"},{"cmd":"yarn add rc-rate","lang":"bash","label":"yarn"},{"cmd":"pnpm add rc-rate","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a peer dependency for rendering React components.","package":"react","optional":false},{"reason":"Required as a peer dependency for rendering React components to the DOM.","package":"react-dom","optional":false}],"imports":[{"note":"The primary `Rate` component is exported as a default. Named imports will fail.","wrong":"import { Rate } from 'rc-rate';","symbol":"Rate","correct":"import Rate from 'rc-rate';"},{"note":"For TypeScript users, this imports the type definition for the component's props, enabling strong typing.","symbol":"RateProps","correct":"import type { RateProps } from 'rc-rate';"},{"note":"In CommonJS environments, when consuming an ESM package with a default export, you often need to access the `.default` property.","wrong":"const Rate = require('rc-rate');","symbol":"Rate (CommonJS)","correct":"const Rate = require('rc-rate').default;"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Rate from 'rc-rate';\nimport 'rc-rate/assets/index.css'; // Don't forget to import the styles!\n\nconst App: React.FC = () => {\n  const [value, setValue] = useState<number>(3.5);\n\n  const handleChange = (newValue: number) => {\n    console.log('New rating:', newValue);\n    setValue(newValue);\n  };\n\n  return (\n    <div>\n      <h2>Basic Star Rating</h2>\n      <Rate\n        defaultValue={2.5}\n        allowHalf\n        onChange={(val) => console.log('Uncontrolled changed:', val)}\n      />\n\n      <h2>Controlled Star Rating (Value: {value})</h2>\n      <Rate\n        value={value}\n        onChange={handleChange}\n        allowHalf\n        character={({ index }) => <span>{index + 1}</span>}\n      />\n\n      <h2>Disabled Rating</h2>\n      <Rate value={4} disabled />\n\n      <h2>Custom Icon Rating</h2>\n      <Rate\n        defaultValue={4}\n        character={<span style={{ color: 'gold' }}>⭐</span>}\n        count={7}\n      />\n    </div>\n  );\n};\n\nconst root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\nroot.render(<App />);","lang":"typescript","description":"This quickstart demonstrates basic usage of `rc-rate`, including uncontrolled and controlled components, half-star selection, custom star characters, and disabled states. It also includes the essential CSS import."},"warnings":[{"fix":"Consider migrating to `@rc-component/rate` for new projects or future-proofing, pending an official migration guide from the maintainers.","message":"There is a new package, `@rc-component/rate`, which appears to be a direct successor or rename of `rc-rate`. While `rc-rate` is still active at `v2.13.1`, future major development might shift to the `@rc-component/rate` namespace. Developers should monitor the project's official channels for guidance on migration or future support.","severity":"breaking","affected_versions":">=2.13.1"},{"fix":"Add `import 'rc-rate/assets/index.css';` to your application's entry file or a relevant component to apply the default styles.","message":"The component's default styling is not bundled with the component logic and must be imported separately. Forgetting to import the CSS will result in an unstyled, potentially unusable component.","severity":"gotcha","affected_versions":"*"},{"fix":"Upgrade to `rc-rate@2.13.1` or later to benefit from the corrected `role` attribute, enhancing the accessibility of your rating components.","message":"Versions prior to `2.13.1` had an incorrect ARIA role for accessibility (`role` attribute), potentially impacting users relying on screen readers for navigation and understanding.","severity":"gotcha","affected_versions":"<2.13.1"},{"fix":"Upgrade to `rc-rate@2.13.0` or later and utilize the new `disabledKeyboard` prop if you need to prevent keyboard interaction with the rating component.","message":"Prior to `v2.13.0`, keyboard navigation for the rating component could not be explicitly disabled, which might interfere with specific interaction patterns or accessibility requirements.","severity":"gotcha","affected_versions":"<2.13.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"If using `require`, modify your import statement to `const Rate = require('rc-rate').default;` to correctly access the default export.","cause":"Incorrect default export handling for the `Rate` component when using CommonJS `require` in an environment that expects `.default`.","error":"Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."},{"fix":"Ensure `import 'rc-rate/assets/index.css';` is present in your application code and that your build tool (e.g., Webpack, Vite) is correctly configured to process CSS files.","cause":"The stylesheet for `rc-rate` is missing or the import path specified is incorrect, or your build system is not configured to handle CSS imports.","error":"Module not found: Error: Can't resolve 'rc-rate/assets/index.css'"},{"fix":"Verify that `react` and `react-dom` versions `>=16.9.0` are installed and resolve correctly in your project. Ensure only one instance of React is loaded, especially in monorepos or complex application setups.","cause":"This usually indicates a mismatch in React versions or multiple instances of React being loaded, particularly if `rc-rate`'s peer dependency requirements are not met.","error":"TypeError: Cannot read properties of undefined (reading 'Provider') or Invariant Violation: Objects are not valid as a React child"}],"ecosystem":"npm"}