@gzued/antd-compiled
Version:
Pre-bundled Ant Design 4.x and related dependencies for @gzued packages
112 lines (81 loc) • 3.96 kB
Markdown
React Rate Component
[![NPM version][npm-image]][npm-url] [](https://github.com/umijs/dumi) [![build status][github-actions-image]][github-actions-url] [![Test coverage][codecov-image]][codecov-url] [![gemnasium deps][gemnasium-image]][gemnasium-url] [![npm download][download-image]][download-url]
[]: http://img.shields.io/npm/v/rc-rate.svg?style=flat-square
[]: http://npmjs.org/package/rc-rate
[]: https://github.com/react-component/rate/workflows/CI/badge.svg
[]: https://github.com/react-component/rate/actions
[]: https://img.shields.io/codecov/c/github/react-component/rate/master.svg?style=flat-square
[]: https://codecov.io/gh/react-component/rate/branch/master
[]: http://img.shields.io/gemnasium/react-component/rate.svg?style=flat-square
[]: https://gemnasium.com/react-component/rate
[]: http://nodejs.org/download/
[]: https://img.shields.io/npm/dm/rc-rate.svg?style=flat-square
[]: https://npmjs.org/package/rc-rate
<img src="https://img.alicdn.com/tps/TB1ijlpLVXXXXb8XpXXXXXXXXXX-466-172.png" width="288"/>
- [CHANGELOG](./CHANGELOG.md)
```
npm install
npm start
```
- Local: http://localhost:9001/
- Online: http://react-component.github.io/rate/
[](https://npmjs.org/package/rc-rate)
```js
import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'rc-rate';
ReactDOM.render(
<Rate />,
document.getElementById('root')
)
```
```js
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.