rc-rate

library2.13.1jsnpmunverified

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.

web-framework http-networking

npm install rc-rate

github ↗package ↗

INSTALL

IMPORT

SIG · RC-RATE

rc-rate

web-frameworkjavascriptv2.13.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Rate

✓ import Rate from 'rc-rate';

✗ import { Rate } from 'rc-rate';

The primary `Rate` component is exported as a default. Named imports will fail.

RateProps

✓ import type { RateProps } from 'rc-rate';

For TypeScript users, this imports the type definition for the component's props, enabling strong typing.

Rate (CommonJS)

✓ const Rate = require('rc-rate').default;

✗ const Rate = require('rc-rate');

In CommonJS environments, when consuming an ESM package with a default export, you often need to access the `.default` property.

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.

import React, { useState } from 'react'; import ReactDOM from 'react-dom/client'; import Rate from 'rc-rate'; import 'rc-rate/assets/index.css'; // Don't forget to import the styles! const App: React.FC = () => { const [value, setValue] = useState<number>(3.5); const handleChange = (newValue: number) => { console.log('New rating:', newValue); setValue(newValue); }; return ( <div> <h2>Basic Star Rating</h2> <Rate defaultValue={2.5} allowHalf onChange={(val) => console.log('Uncontrolled changed:', val)} /> <h2>Controlled Star Rating (Value: {value})</h2> <Rate value={value} onChange={handleChange} allowHalf character={({ index }) => <span>{index + 1}</span>} /> <h2>Disabled Rating</h2> <Rate value={4} disabled /> <h2>Custom Icon Rating</h2> <Rate defaultValue={4} character={<span style={{ color: 'gold' }}>⭐</span>} count={7} /> </div> ); }; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render(<App />);

Debug

Known issues

breakingThere 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.

fix

Consider migrating to `@rc-component/rate` for new projects or future-proofing, pending an official migration guide from the maintainers.

affects: >=2.13.1

gotchaThe 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.

fix

Add `import 'rc-rate/assets/index.css';` to your application's entry file or a relevant component to apply the default styles.

affects: *

gotchaVersions 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.

fix

Upgrade to `rc-rate@2.13.1` or later to benefit from the corrected `role` attribute, enhancing the accessibility of your rating components.

affects: <2.13.1

gotchaPrior 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.

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.

affects: <2.13.0

Errors

Common errors & fixes

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Incorrect default export handling for the `Rate` component when using CommonJS `require` in an environment that expects `.default`.

fix

If using `require`, modify your import statement to `const Rate = require('rc-rate').default;` to correctly access the default export.

Module not found: Error: Can't resolve 'rc-rate/assets/index.css'

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.

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.

TypeError: Cannot read properties of undefined (reading 'Provider') or Invariant Violation: Objects are not valid as a React child

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.

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.

Upgrade

Version history

2.13.1latest on npm

Audit

Dependencies

reactrequiredRequired as a peer dependency for rendering React components.

react-domrequiredRequired as a peer dependency for rendering React components to the DOM.

Agent activity

7 hits · last 30 days

node

Resources

githubhttps://github.com/react-component/rate ↗

packagehttps://www.npmjs.com/package/rc-rate ↗