{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-rate"],"cli":null},"imports":["import Rate from 'rc-rate';","import type { RateProps } from 'rc-rate';","const Rate = require('rc-rate').default;"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}