unique-react-rating-stars
v1.1.0
Published
A React component for rating stars
Downloads
19
Maintainers
Readme
unique-react-rating-stars
A customizable React component for displaying star ratings.
Installation
Install the package using npm:
npm install unique-react-rating-stars
Or with yarn:
yarn add unique-react-rating-stars
Peer Dependencies Ensure you have react and react-dom installed in your project:
npm install react react-dom
Usage
Import the RatingHandler component and use it in your React application.
TypeScript Support
Type definitions are included with the package, allowing seamless integration in TypeScript projects.
Author
Mais Aburabie
Basic Example
import RatingHandler from 'unique-react-rating-stars';
const App = () => {
return (
<div>
<h1>Product Rating</h1>
<RatingHandler value={3} readOnly={true} dir="ltr"/>
</div>
);
};
export default App;
Props
value
(required)
- Type:
number
- Description: The current rating value.
onChange
- Type:
(value: number) => void
- Description: Callback function called when the rating changes.
readOnly
- Type:
boolean
- Default:
false
- Description: If
true
, the rating component is read-only.
max
- Type:
number
- Default:
5
- Description: The maximum number of stars to display.
dir
- Type:
ltr
|rtl
- Default:
ltr
- Description: The Direction of stars to display.
Advanced Example
Here's a more detailed example demonstrating all available props:
import React, { useState } from 'react';
import RatingHandler from 'unique-react-rating-stars';
const ProductReview = () => {
const [rating, setRating] = useState(0);
const handleRatingChange = (value) => {
console.log('Selected rating:', value);
setRating(value);
};
return (
<div>
<h2>Rate Our Product</h2>
<RatingHandler
value={rating}
onChange={handleRatingChange}
readOnly={false}
dir="ltr"
max={10}
/>
<p>Your rating: {rating}</p>
</div>
);
};
export default ProductReview;
License
This project is licensed under the ISC License.