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
Local: http://localhost:9001/
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';
const 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 | boolean | false | Support half star |
| allowClear | boolean | true | Reset when click again |
| style | object | {} | |
| onChange | function | (value) => {} | onChange will be triggered when click |
| onHoverChange | function | (value) => {} | onHoverChange will be triggered when hover on stars |
| character | ReactNode | (props) => ReactNode | ★ | The each character of rate |
| disabled | boolean | false | |
| direction | string | ltr | The direction of rate |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
rc-rate is released under the MIT license.
FAQs
Unknown package
The npm package rc-rate receives a total of 974,944 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
Cyber insurance rates are dropping as the market matures, according to a new report projecting global premiums to reach $43 billion by 2030, driven by international market uptake and growth in the SME sector.
Research
Security News
Socket researchers unpack a typosquatting package with malicious code that logs keystrokes and exfiltrates sensitive data to a remote server.
Security News
The JavaScript community has launched the e18e initiative to improve ecosystem performance by cleaning up dependency trees, speeding up critical parts of the ecosystem, and documenting lighter alternatives to established tools.