JSPM

@rc-component/rate

1.0.0
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 265728
  • Score
    100M100P100Q186370F
  • License MIT

React Star Rate Component

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@rc-component/rate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    rc-rate

    React Rate Component

    NPM version npm download build status Codecov bundle size dumi

    Screenshots

    Changelog

    Development

    npm install
    npm start

    Example

    install

    rc-rate

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Rate from '@rc-component/rate';
    
    ReactDOM.render(
      <Rate />,
      document.getElementById('root')
    )

    with styled-components

    import React from 'react';
    import ReactDOM from 'react-dom';
    import Rate from '@rc-component/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.