rc-rate

What is rc-rate?

The rc-rate npm package is a React component for visualizing and interacting with a star rating system. It allows users to display ratings in the form of stars and also to collect rating input from users.

What are rc-rate's main functionalities?

Display static star ratings

This feature allows you to display a static star rating that users cannot interact with. The 'defaultValue' prop sets the number of active stars, and the 'disabled' prop ensures that the rating is read-only.

import Rate from 'rc-rate';

<Rate defaultValue={3} disabled />

Collect user ratings

This feature enables the collection of star ratings from users. The 'onChange' prop is a callback function that is called whenever the user selects a new rating.

import Rate from 'rc-rate';

<Rate defaultValue={0} onChange={handleRateChange} />

Customize the appearance of the stars

This feature allows customization of the star icons. The 'character' prop can be used to render a custom React element instead of the default star.

import Rate from 'rc-rate';

<Rate defaultValue={3} character={<i className='fa fa-heart' />} />

Other packages similar to rc-rate

react-rating

react-rating is a similar package that provides a star rating component for React. It allows for custom symbols and has more customization options for the symbols used for the rating, compared to rc-rate.

react-star-ratings

react-star-ratings is another package that offers star rating components for React applications. It supports fractional star ratings and has a simpler API for changing the appearance of the stars, which might be easier to use for some developers compared to rc-rate.

react-rater

react-rater is a star rating component for React that supports features like half-star ratings and custom icons. It provides a more flexible approach to handling user interactions and customizing the component's behavior compared to rc-rate.

README

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	★	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.

Changelog

2.6.0

2020-04-16

• feat: add direction rtl #80
• chore: use father #81