Skip to content

awran5/react-simple-star-rating

Repository files navigation

React Simple Rating

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

NPM JavaScript Style Guidenpm bundle sizeGitHub

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 function MyComponent() {
  const [rating, setRating] = useState(0)

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate)

    // other logic
  }
  // Optinal callback functions
  const onPointerEnter = () => console.log('Enter')
  const onPointerLeave = () => console.log('Leave')
  const onPointerMove = (value: number, index: number) => console.log(value, index)

  return (
    <div className='App'>
      <Rating
        onClick={handleRating}
        onPointerEnter={onPointerEnter}
        onPointerLeave={onPointerLeave}
        onPointerMove={onPointerMove}
        /* Available Props */
      />
    </div>
  )
}

Reset Rating Value

import React, { useState } from 'react'
import { Rating } from 'react-simple-star-rating'

export function MyComponent() {
  const [rating, setRating] = useState(0)

  // Catch Rating value
  const handleRating = (rate: number) => {
    setRating(rate)
  }

  const handleReset = () => {
    // Set the initial value
    setRating(0)
  }

  return (
    <div className='App'>
      {/* set initial value */}
      <Rating onClick={handleRating} initialValue={rating} />

      <button onClick={handleReset}>reset</button>
    </div>
  )
}

Available Props

Prop Type Options Description Default
onClick function Optional callback with hover, index and event values passed -
onPointerMove function Optional callback with hover, index and event values passed -
onPointerEnter function Optional callback with event passed -
onPointerLeave function Optional callback with event passed -
initialValue number Optional Set initial value 0
iconsCount number Optional Number of the icons 5
readonly boolean Optional Readonly mode false
rtl boolean Optional RTL mode false
transition boolean Optional Adds a smooth transition effect on mouse hover false
allowFraction boolean Optional Enable a fractional icon (half icon) 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
size number Optional SVG Icon width / height in px 25
SVGstrokeColor string Optional SVG Icon stroke color currentColor
SVGstorkeWidth string | number Optional SVG Icon storke width 0
SVGclassName string Optional SVG Icon css class star-svg
SVGstyle CSSProperties Optional SVG inline style -
fillIcon ReactNode Optional Custom fill icon SVG null
fillColor string Optional Fill icons color #f1a545
fillColorArray array Optional Array of string to add color range []
fillStyle CSSProperties Optional Inline style applied to filled icon span basic style
fillClassName string Optional Applied to the filled icon span filled-icons
emptyIcon ReactNode Optional Custom empty icon SVG null
emptyColor string Optional Empty icons color #cccccc
emptyStyle CSSProperties Optional Inline style applied to empty icon span basic style
emptyClassName string Optional Applied to the empty icon span empty-icons
customIcons array of object Optional Add a group of icons []
allowHover boolean Optional Enable / Disable hover effect true
disableFillHover boolean Optional Enable / Disable hover effect on filled stars false
allowTitleTag boolean Optional Enable / Disable HTMLtitle Tag true
showTooltip boolean 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
titleSeparator string Optional Separator word in a title of a rating star (1 out of 5) out of


BREAKING CHANGES: version 4.1.0 (2022-10-03)

old new changes
allowHalfIcon allowFraction Renamed
fullIcon fillIcon Renamed
fullStyle fillStyle Renamed
fullClassName fillClassName Renamed
ratingValue - Removed

Demos

See all demos and usage examples in action.


Edit react-simple-rating-ts

License

MIT © awran5