A simple react component library that enable react developers easily use, edit, tweak and style a rating functionality on the go for products or services in an e-commerce web-application or mobile application
npm install star-product-rating
npm install star-product-rating
`
or
`
yarn add star-product-rating
`
Usage
Here's a basic example of how to use the StarRating component:
` jsx
import React, { useState } from 'react';
import { StarRating } from "star-product-rating";
import './WatchedMovieCard.css';
const WatchedMovieCard = ({ image, title, imbRating, userRating, watchTime }) => {
const [storedRating, setStoredRating] = useState(2);
return (
{title}
size={16}
starLength={5}
color='yellow'
messages={['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']}
starTextStyle={{ fontSize: "10px", color: "yellow" }}
defaultRating={storedRating}
newRating={setStoredRating}
disabled
/>
🌟 {userRating}
⌛ {watchTime} min
)
}
export default WatchedMovieCard;
`
Image
$3
!Star Product Rating
API Documentation
$3
| Prop | Type | Default | Description |
|----------------|-----------|------------|-----------------------------------------|
| starLength | number | 5 | Number of stars to display |
| color | string | #000000 | Color of the stars |
| size | number | 24 | Size of each star |
| disabled | boolean | false | Disable interaction with the stars |
| starStyle | object | {} | Custom styles for the star container |
| starTextStyle| object | {} | Custom styles for the rating text |
| messages | array | ['Terrible', 'Bad', 'Okay', 'Good', 'Amazing'] | Array of rating messages |
| defaultRating| number | 1 | Default rating value |
| newRating | function | | Callback function for rating change |
Examples
$3
#### This is to only display the rating data of a user fetched from a database and disable user input
`jsx
starLength={5}
color="#FFD700"
size={24}
disabled={true}
newRating={handleNewRating}
/>
`
$3
#### The props below are required to prevent any error and to enable you store the data from the rating functionalities
`jsx
starLength={5}
color="#FFD700"
size={24}
defaultRating={storedRating}
newRating={handleNewRating}
/>
`
$3
#### The messages props must contain values (strings) of the same length with the number value inputted in the starLength prop.
`jsx
starLength={5}
messages={['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']}
color="#FFD700"
size={24}
defaultRating={storedRating}
newRating={handleNewRating}
/>
`
Custom Star Style
` jsx
starLength={5}
color="#FFD700"
size={24}
starStyle={{ display: 'flex', alignItems: 'center', gap: '5px' }}
newRating={handleNewRating}
/>
``