Socket
Socket
Sign inDemoInstall

react-awesome-stars-rating

Package Overview
Dependencies
8
Maintainers
1
Versions
41
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-awesome-stars-rating

React Awesome Stars Rating is a simple star component with easy integration for your React applications.


Version published
Maintainers
1
Weekly downloads
322
decreased by-22.22%

Weekly downloads

Readme

Source

React Awesome Stars Rating · GitHub license npm version Build Status codecov

React Awesome Stars Rating is a simple star component with easy integration for your React applications.

Table of Contents

Previews

react-awesome-stars-rating preview

Features

  • Half stars
  • Custom size and color
  • Value shows with high precision
  • Easy integration with Redux
  • Accessibility
  • SVG Icons

Installation

npm install react-awesome-stars-rating

Usage

import React from 'react';
import ReactDOM from 'react-dom';

import ReactStarsRating from 'react-awesome-stars-rating';

const onChange = (value) => {
  console.log(`React Stars Rating value is ${value}`);
};

const ReactStarsExample = ({ value }) => {
  return <ReactStarsRating onChange={onChange} value={value} />;
};

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

Documentation

NameDescriptionTypeDefault
idIdentifierString${Date.now()}
valueValueNumber0
onChangeA function, that will be invoked when value have changedFunctionnull
isEditIf true the rating is in editing modeBooleantrue
isHalfIf true half stars are availableBooleantrue
countCount of the starsNumber5
sizeSize of the starsNumber25
starGapGap between the starsNumber0
classNameClass name for button containerString''
primaryColorStar's color when star is activeString'orange'
secondaryColorStar's color when star isn't activeString'grey'
isArrowSubmitLeft arrow or right arrow click onvokes onChangeBooleanfalse

Examples

You can see live examples by below links:

Keywords

FAQs

Last updated on 14 Mar 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc