You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
5 years ago | |
|---|---|---|
| .. | ||
| assets | 5 years ago | |
| es | 5 years ago | |
| lib | 5 years ago | |
| HISTORY.md | 5 years ago | |
| LICENSE.md | 5 years ago | |
| README.md | 5 years ago | |
| package.json | 5 years ago | |
README.md
rc-rate
React Rate Component
Screenshots
Development
npm install
npm start
Example
http://localhost:8000/examples/
online example: 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 | 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 | (props) => ReactNode | ★ | The each character of rate |
| disabled | bool | 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.
