JSPM – react-star-rate@0.1.1

Package Exports

react-star-rate

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 (react-star-rate) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Lightweight, customizable star ratings component for React.

_{Created by Raymon Zhang}

Features

🔩 Easily Customizable
🕊 Lightweight - less than 4kb including styles
✅ Accessible

Installation
- With yarn
- With NPM
Getting Started
Props
Example

Installation

With yarn

yarn add react-star-rate

With NPM

npm install react-star-rate

Getting Started

You can add React Stars Rating to your project using the <StarsRating /> component.

import { useState } from 'react';

import StarsRating from 'react-star-rate';

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <StarsRating
        value={value}
        onChange={value => {
          setValue(value);
        }}
      />
    </div>
  );
};

Props

Name	Type	Default	Description
`allowClear`	boolean	`true`	Allow the value to be reset when clicked again
`allowHalf`	boolean	`true`	Support half of the star to be selected
`autoFocus`	boolean	-	Automatically focus the element
`classNamePrefix`	string	`"react-star-rate"`	The components will have classNames with the given prefix
`count`	number	`5`	Number of stars
`defaultValue`	number	`0`	The default value of the stars. Should be the same as the default `useState` value
`direction`	string	`"ltr"`	The direction of the selected stars. Either `"ltr"` or `"rtl"`
`disabled`	boolean	`false`	Disable the rating element
`onBlur`	function	-	Will be triggered on blur
`onChange`	function	`(value) => {}`	Will be triggered on change of value
`onFocus`	function	-	Will be triggered on focus
`onHoverChange`	function	`(value) => {}`	Will be triggered on hover
`style`	object	`{}`	Custom styles
`symbol`	string	`"★"`	The symbol to be displayed
`tabIndex`	number	`0`	The tab index of the stars container
`value`	number	`-`	Controlled value of the component

Example

You can visit the example here: https://codesandbox.io/s/react-star-rate-okxlw.

react-star-rate