Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
react-star-rate
Advanced tools
You can visit the example here:
yarn add react-star-rate
npm install react-star-rate
You can add React Stars Rating to your project using the <StarsRating />
component.
import { useState } from 'react';
import StarsRating from 'react-star-rate';
const App = () => {
const [value, setValue] = useState(0);
return (
<div>
<StarsRating
value={value}
onChange={value => {
setValue(value);
}}
/>
</div>
);
};
Name | Type | Default | Description |
---|---|---|---|
allowClear | boolean | true | Allow the value to be reset when clicked again |
allowHalf | boolean | true | Allow half of the star to be selected |
autoFocus | boolean | - | Automatically focus the element |
classNamePrefix | string | "react-star-rate" | The components will have classNames with the given prefix |
count | number | 5 | Number of stars |
defaultValue | number | 0 | The default value of the stars. Should be the same as the default useState value |
direction | string | "ltr" | The direction of the selected stars. Either "ltr" or "rtl" |
disabled | boolean | false | Disable the rating element |
onBlur | function | - | Will be triggered on blur |
onChange | function | (value) => {} | Will be triggered on change of value |
onFocus | function | - | Will be triggered on focus |
onHoverChange | function | (value) => {} | Will be triggered on hover |
style | object | {} | Custom styles. See styling |
symbol | string | "★" | The symbol to be displayed |
tabIndex | number | 0 | The tab index of the stars container |
value | number | - | Controlled value of the component |
Each component inside the StarsRating
component is keyed and ships with default styles. You can apply custom styles by accessing the key on the style
prop.
style.style
- The main wrapper ul
element.style.full
- Styles for when the star is fully active.
style.full.star
- The wrapper li
element every star.style.full.first
- The first half star, on top.style.full.second
- The second full star, in the background.style.half
- Styles for when the star is half active.
style.half.star
- The wrapper li
element every star.style.half.first
- The first half star, on top.style.half.second
- The second full star, in the background.style.zero
- Styles for when the star is not active.
style.zero.star
- The wrapper li
element every star.style.zero.first
- The first half star, on top.style.zero.second
- The second full star, in the background.style.hover
- Styles for when the element is hovered over. You can use access of the keys listed above in the hover
object.You can also apply custom styles using CSS Stylesheets. The classnames are determined with the classNamePrefix
prop (defaults to "react-star-rate"
).
${classNamePrefix}
- The main ul
element.${classNamePrefix}--ltr
| - ${classNamePrefix}--rtl
- If the rating component is from left-to-right or right-to-left respectively.${classNamePrefix}__star
- The star li
element.${classNamePrefix}__star--zero
| ${classNamePrefix}__star--half
| ${classNamePrefix}__star--full
- When the star is inactive, half, or completely full.${classNamePrefix}__star__first
- The first half star, on top.${classNamePrefix}__star__second
- The second full star, in the background.MIT Licensed. Copyright (c) 2021-present, Raymon Zhang.
FAQs
Lightweight, customizable star ratings component for React
The npm package react-star-rate receives a total of 402 weekly downloads. As such, react-star-rate popularity was classified as not popular.
We found that react-star-rate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.