Leocardoso94 / beauty-stars

A simple and beauty star rating for React projects

Welcome to beauty-stars 👋

A simple and beauty star rating for React projects

Install

npm install --save beauty-stars
// or
yarn add beauty-stars

Usage

import React, { Component } from "react";

import BeautyStars from "beauty-stars";

export default class App extends Component {
  state = { value: 0 };
  render() {
    return (
      <BeautyStars
        value={this.state.value}
        onChange={value => this.setState({ value })}
      />
    );
  }
}

API

This a list of props that you can pass down to the component:

Property	Description	Default value	type
maxStars	How many total stars you want	5	number
value	Set rating value	0	number
editable	Enable edit	true	boolean
inactiveColor	Color of inactive star (this supports any CSS valid value)	#121621	string
activeColor	Color of selected or active star	#FFED76	string
size	Size of stars (in px)	36px	string
onChange(newValue)	Will be invoked any time the rating is changed	undefined	function
hideInactive	Will hide inactive stars	false	boolean
gap	Sets the gaps (gutters) between stars	16px	string

Author

👤 Leocardoso94

• Twitter: @leocardoso94_
• Github: @leocardoso94

Show your support

Give a ⭐️ if this project helped you!