@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

OR

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

License

This project is licensed under the MIT License - see the LICENSE file for details.
MIT © milayek86

Issues

If you find any issues or have suggestions, please open an issue here.