react-simple-star-rating
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.5 • Public • Published

    React Simple Rating

    A simple react component for adding a star rating to your project.

    NPM npm bundle size GitHub

    screenshot

    Install

    npm

    npm i react-simple-star-rating

    Yarn

    yarn add react-simple-star-rating

    Usage

    import React, { useState } from 'react'
    import { Rating } from 'react-simple-star-rating'
    
    export default function MyComponent() {
      const [rating, setRating] = useState(0) // initial rating value
    
      // Catch Rating value
      const handleRating = (rate: number) => {
        setRating(rate)
        // other logic
      }
    
      return (
        <div className='App'>
          <Rating onClick={handleRating} ratingValue={rating} /* Available Props */ />
        </div>
      )
    }

    Available Props

    Prop Type Options Description Default
    ratingValue number Required Rating value passed from the Rating component -
    onClick function Optional Handles the returned rating value -
    initialValue number Optional Set initial value (needed to reset the value) 0
    iconsCount number Optional Number of the icons 5
    size number Optional Icon width / height in px 25
    readonly boolean Optional Readonly mode false
    fillColor string Optional Full icons color #f1a545
    fillColorArray array Optional Array of string to add color range []
    emptyColor string Optional Empty icons color #cccccc
    fullIcon ReactElement Optional Custom full icon SVG null
    emptyIcon ReactElement Optional Custom empty icon SVG null
    customIcons array of object Optional Add a group of icons []
    rtl boolean Optional RTL mode false
    allowHalfIcon boolean Optional Enable a fractional icon (half icon) false
    allowHover boolean Optional Enable / Disable hover effect true
    transition boolean Optional Adds a transition effect on mouse hover false
    className string Optional Applied to the main span react-simple-star-rating
    style CSSProperties Optional Inline style applied to the main span basic style
    fullClassName string Optional Applied to the filled icon span filled-icons
    emptyClassName string Optional Applied to the empty icon span empty-icons
    fullStyle CSSProperties Optional Inline style applied to filled icon span basic style
    emptyStyle CSSProperties Optional Inline style applied to empty icon span basic style
    showTooltip string Optional Show a tooltip with live values false
    tooltipDefaultText string Optional Initial tooltip text if no rating value Your Rate
    tooltipArray array Optional Array of strings to show inside tooltip []
    tooltipClassName string Optional Tooltip CSS class rating-tooltip
    tooltipStyle CSSProperties Optional Inline style applied to the tooltip span basic style


    Migrate to v4

    1. Old props changes
    old new changes
    stars iconsCount Renamed
    children inline props Removed
    1. Remove RatingView Component, now you can use readonly prop instead

    2. Custom SVG, You can use your own SVG now as a inline props fullIcon | emptyIcon | customIcons. See all available props above


    Demos

    See all demos and usage examples in action.


    Edit react-simple-rating-ts

    License

    MIT © awran5

    Install

    npm i react-simple-star-rating

    DownloadsWeekly Downloads

    3,737

    Version

    4.0.5

    License

    MIT

    Unpacked Size

    45 kB

    Total Files

    8

    Last publish

    Collaborators

    • awran5