@mil-rlib/reactjs-star-rating

@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

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 = (clickedIndex) => {
    console.log('Clicked star index:', clickedIndex)
  }

  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 = (count) => {
    setActiveStars(count)
  }

  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={(clickedCount) =>
        console.log('Clicked star count:', clickedCount)
      }
      disabled
    />
  )
}

export default DisabledExample

Props

Prop	Type	Default	Description
activeStars	number		Number of active stars.
totalStars	number		Total number of stars to display.
starStyle	object		CSS styles for the stars.
containerStyle	object		CSS styles for the container.
direction	string		Layout direction of stars (vertical/horizontal).
activeStarStyle	object		CSS styles for active stars.
inActiveStarStyle	object		CSS styles for inactive stars.
onClick	function		Callback function triggered on click.
disabled	boolean	false	Disables the star rating component.

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.