rc-rate
Advanced tools
Package description
The rc-rate npm package is a React component for visualizing and interacting with a star rating system. It allows users to display ratings in the form of stars and also to collect rating input from users.
Display static star ratings
This feature allows you to display a static star rating that users cannot interact with. The 'defaultValue' prop sets the number of active stars, and the 'disabled' prop ensures that the rating is read-only.
import Rate from 'rc-rate';
<Rate defaultValue={3} disabled />Collect user ratings
This feature enables the collection of star ratings from users. The 'onChange' prop is a callback function that is called whenever the user selects a new rating.
import Rate from 'rc-rate';
<Rate defaultValue={0} onChange={handleRateChange} />Customize the appearance of the stars
This feature allows customization of the star icons. The 'character' prop can be used to render a custom React element instead of the default star.
import Rate from 'rc-rate';
<Rate defaultValue={3} character={<i className='fa fa-heart' />} />react-rating is a similar package that provides a star rating component for React. It allows for custom symbols and has more customization options for the symbols used for the rating, compared to rc-rate.
react-star-ratings is another package that offers star rating components for React applications. It supports fractional star ratings and has a simpler API for changing the appearance of the stars, which might be easier to use for some developers compared to rc-rate.
react-rater is a star rating component for React that supports features like half-star ratings and custom icons. It provides a more flexible approach to handling user interactions and customizing the component's behavior compared to rc-rate.
Readme
React Rate Component
npm install
npm start
http://localhost:8000/examples/
online example: http://react-component.github.io/rate/
import React from 'react'
import ReactDOM from 'react-dom'
import Rate from 'rc-rate'
ReactDOM.render(
<Rate />,
document.getElementById('root')
)
import React from 'react'
import ReactDOM from 'react-dom'
import Rate from 'rc-rate'
import styled from 'styled-components'
cosnt StyledRate = styled(Rate)`
&.rc-rate {
font-size: ${({ size }) => size}px;
}
`
ReactDOM.render(
<StyledRate size="24" />,
document.getElementById('root')
)
| name | type | default | description |
|---|---|---|---|
| count | number | 5 | star numbers |
| value | number | controlled value | |
| defaultValue | number | 0 | initial value |
| allowHalf | bool | false | support half star |
| allowClear | bool | true | reset when click again |
| style | object | {} | |
| onChange | function(value: Number) | `onChange` will be triggered when click. | |
| onHoverChange | function(value: Number) | `onHoverChange` will be triggered when hover on stars. | |
| character | ReactNode | ★ | The each character of rate |
| disabled | bool | false |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-rate is released under the MIT license.
FAQs
React Star Rate Component
The npm package rc-rate receives a total of 751,358 weekly downloads. As such, rc-rate popularity was classified as popular.
We found that rc-rate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 8 open source maintainers 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
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.