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 | number |

Author

👤 Leocardoso94

• Twitter: @leocardoso94_
• Github: @leocardoso94

Show your support

Give a ⭐️ if this project helped you!