rc-rate-modern
v2.13.0
Published
React Star Rate Component
Downloads
25
Maintainers
Readme
rc-rate
React Rate Component
Screenshots
Changelog
Development
npm install
npm start
Example
Local: http://localhost:9001/
Online: http://react-component.github.io/rate/
install
Usage
import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'rc-rate';
ReactDOM.render(
<Rate />,
document.getElementById('root')
)
with styled-components
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')
)
API
props
| 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 |
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
rc-rate is released under the MIT license.