@mil-rlib/reactjs-star-rating NPM

@mil-rlib/reactjs-star-rating

Introduction

React.js Star Rating is a professional-grade component tailored for React.js applications, offering a seamless way to integrate customizable star ratings into your projects. It provides a sleek and intuitive interface for users to rate content or products effortlessly.

Features

Simplicity: Easily integrate star ratings into your React.js applications with minimal effort.
Customizability: Customize the appearance of stars, including size, colors, and more, to align with your design requirements.
Flexibility: Choose between full and half-star rating options to suit your specific use cases.
Accessibility: Designed with accessibility in mind, ensuring an inclusive user experience for all.

Demo

https://github.com/milayek86/reactjs-star-rating/assets/38817202/fbea66ed-26a9-4ba0-8445-56bbd3f98f0d

Demo Link

Install

npm install --save @mil-rlib/reactjs-star-rating

yarn add @mil-rlib/reactjs-star-rating

Usage

Basic Usage

import React from 'react'
import StarRating from '@mil-rlib/reactjs-star-rating'

const BasicExample = () => {
  const handleStarClick = (starCount) => {
    console.log('Clicked star index:', starCount)
  }

  return <StarRating activeStars={3} totalStars={5} onClick={handleStarClick} />
}

export default BasicExample

Customization

import React, { useState } from 'react'
import StarRating from '@mil-rlib/reactjs-star-rating'

const App = () => {
  const [activeStars, setActiveStars] = useState(0)
  const handleStarClick = (starCount) => {
    setActiveStars(starCount)
  }

  return (
    <StarRating
      activeStars={activeStars}
      totalStars={10}
      starStyle={{ fontSize: 40, color: 'red' }}
      containerStyle={{ border: 'solid' }}
      direction={'horizontal'} //vertical/horizontal
      activeStarStyle={{ color: 'green' }}
      inActiveStarStyle={{ color: 'gray' }}
      onClick={handleStarClick}
      disabled={true}
    />
  )
}

Disabled Rating

import React from 'react'
import StarRating from '@mil-rlib/reactjs-star-rating'

const DisabledExample = () => {
  return (
    <StarRating
      activeStars={4}
      totalStars={5}
      onClick={(starCount) => console.log('Clicked star count:', starCount)}
      disabled
    />
  )
}

export default DisabledExample

Props

Name	Type	Default	Required	Description
`onClick`	`(count: number) => void`	`() => {}`	No	Callback function invoked when a star is clicked. Receives the count of the clicked star as an argument.
`direction`	`string (horizontal / vertical)`	`horizontal`	No	Specifies the direction of the star rating display.
`totalStars`	`number`	`5`	Yes	The total number of stars to be displayed in the rating component.
`activeStars`	`number`	`0`	No	The number of active stars initially selected or highlighted.
`containerStyle`	`CSSProperties`	`{}`	No	Additional CSS styles to apply to the container of the star rating component.
`starStyle`	`CSSProperties`	`{}`	No	Additional CSS styles to apply to each individual star element.
`activeStarStyle`	`CSSProperties`	`{}`	No	Additional CSS styles to apply to active (filled) stars.
`inActiveStarStyle`	`CSSProperties`	`{}`	No	Additional CSS styles to apply to inactive (empty) stars.
`disabled`	`boolean`	`false`	No	Disables the star rating component when set to `true`, preventing interaction with the stars.