@alwaan/react-star-rating v1.0.2

# @alwaan/react-star-rating

A flexible and customizable star rating component for React applications.

## Installation

You can install this package via npm:

```bash
npm install @alwaan/react-star-rating

Usage

To use the Star Rating component in your React application, follow these steps:

1. Import the component into your application:

   import React from 'react';
   import StarRating from '@alwaan/react-star-rating';

2. Include the Star Rating component in your component's JSX code. You can customize the component by passing the necessary props.

   const App = () => {
     // Your component logic here
   
     return (
       <div>
         {/* Your content goes here */}
         <StarRating
           isReadOnly={true} //Optional: is readonly - does not perform any event (default: false)
           count={10} //Optional: No of stars to display (default: 5)
           color={'red'} //Optional: Initial star color (default: grey)
           filledColor={'green'} //Optional: Filled star color (default: gold)
           size={20} //Optional: Star size in px (default: 15px)
           value={3} //Optional: Initial filled star count (default: 0)
           allowHover={false} //Optional: Allow hover effect (default: true)
           getValue={getValue} // Function to get selected star value
         />
       </div>
     );
   };
   
   export default App;

3. Customize the Star Rating component by passing the required props:

   • isReadOnly: Optional: is readonly - does not perform any event (default: false)
   • count: Optional: No of stars to display (default: 5)
   • color: Optional: Initial star color (default: grey)
   • filledColor: Optional: Filled star color (default: gold)
   • size: Optional: Star size in px (default: 15px)
   • value: Optional: Initial filled star count (default: 0)
   • allowHover: Optional: Allow hover effect (default: true)
   • getValue: Function to get selected star value

Props

isReadOnly (Boolean)

does not perform any event (default: false).

count (Number)

No of stars to display (default: 5).

color (String | Color Code: Hex, RGB)

Initial star color (default: grey).

filledColor (String | Color Code: Hex, RGB)

Filled star color (default: gold).

size (Number)

Star size in px (default: 15px).

value (Number)

Initial filled star count (default: 0).

allowHover (Boolean)

Allow hover effect (default: true).

getValue (Function)

A callback function to get selected star value. It receives the selected star value as an argument.

Issues

If you encounter any issues or have suggestions for improvements, please email us at support@alwaantechnology.com.