dw-neit-rc-rate

React Rate Component

Screenshots

Changelog

• 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 'dw-neit-rc-rate';

ReactDOM.render(
  <Rate />,
  document.getElementById('root')
)

with styled-components

import React from 'react';
import ReactDOM from 'react-dom';
import Rate from 'dw-neit-rc-rate';
import styled from 'styled-components';

const StyledRate = styled(Rate)`
  &.dw-neit-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

dw-neit-rc-rate is released under the MIT license.