@alwaan/react-star-rating
v1.0.2
Published
React App Star Rating
Downloads
9
Maintainers
Readme
# @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:
Import the component into your application:
import React from 'react'; import StarRating from '@alwaan/react-star-rating';
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;
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 [email protected].