5.1.7 • Published 2 years ago

react-simple-star-rating v5.1.7

Weekly downloads
34
License
MIT
Repository
github
Last release
2 years ago

React Simple Rating

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

NPM JavaScript Style Guidenpm bundle sizeGitHub

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

PropTypeOptionsDescriptionDefault
onClickfunctionOptionalcallback with hover, index and event values passed-
onPointerMovefunctionOptionalcallback with hover, index and event values passed-
onPointerEnterfunctionOptionalcallback with event passed-
onPointerLeavefunctionOptionalcallback with event passed-
initialValuenumberOptionalSet initial value0
iconsCountnumberOptionalNumber of the icons5
readonlybooleanOptionalReadonly modefalse
rtlbooleanOptionalRTL modefalse
transitionbooleanOptionalAdds a smooth transition effect on mouse hoverfalse
allowFractionbooleanOptionalEnable a fractional icon (half icon)false
classNamestringOptionalApplied to the main spanreact-simple-star-rating
styleCSSPropertiesOptionalInline style applied to the main spanbasic style
sizenumberOptionalSVG Icon width / height in px25
SVGstrokeColorstringOptionalSVG Icon stroke colorcurrentColor
SVGstorkeWidthstring | numberOptionalSVG Icon storke width0
SVGclassNamestringOptionalSVG Icon css classstar-svg
SVGstyleCSSPropertiesOptionalSVG inline style-
fillIconReactNodeOptionalCustom fill icon SVGnull
fillColorstringOptionalFill icons color#f1a545
fillColorArrayarrayOptionalArray of string to add color range[]
fillStyleCSSPropertiesOptionalInline style applied to filled icon spanbasic style
fillClassNamestringOptionalApplied to the filled icon spanfilled-icons
emptyIconReactNodeOptionalCustom empty icon SVGnull
emptyColorstringOptionalEmpty icons color#cccccc
emptyStyleCSSPropertiesOptionalInline style applied to empty icon spanbasic style
emptyClassNamestringOptionalApplied to the empty icon spanempty-icons
customIconsarray of objectOptionalAdd a group of icons[]
allowHoverbooleanOptionalEnable / Disable hover effecttrue
disableFillHoverbooleanOptionalEnable / Disable hover effect on filled starsfalse
showTooltipstringOptionalShow a tooltip with live valuesfalse
tooltipDefaultTextstringOptionalInitial tooltip text if no rating valueYour Rate
tooltipArrayarrayOptionalArray of strings to show inside tooltip[]
tooltipClassNamestringOptionalTooltip CSS classrating-tooltip
tooltipStyleCSSPropertiesOptionalInline style applied to the tooltip spanbasic style
titleSeparatorstringOptionalSeparator word in a title of a rating star (1 out of 5)out of

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

oldnewchanges
allowHalfIconallowFractionRenamed
fullIconfillIconRenamed
fullStylefillStyleRenamed
fullClassNamefillClassNameRenamed
ratingValue-Removed

Demos

See all demos and usage examples in action.

Edit react-simple-rating-ts

License

MIT © awran5

5.1.5

2 years ago

5.1.3

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.7

2 years ago

5.1.6

2 years ago

5.1.0

2 years ago

5.0.0

2 years ago

4.1.0

2 years ago

4.1.1

2 years ago

4.0.5

3 years ago

4.0.4

3 years ago

4.0.3

3 years ago

4.0.2

3 years ago

4.0.0

3 years ago

3.0.0

3 years ago

2.1.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago