Star Product Rating

Description

This is the repository for the React component library that enables developers to easily use, edit, tweak, and style a rating functionality for products or services in e-commerce web applications or mobile applications. It is compatible with both JavaScript and TypeScript for the React.js framework.

Table of Contents

• Installation
• Usage
• API
• Examples
• Contributing
• License
• Changelog

Installation

To install the package, use npm or yarn:

bash

npm install star-products-rating

or

yarn add star-products-rating

Usage

Here's a basic example of how to use the StarRating component:

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 (
        <div className='wm-card-container'>
            <img src={image} alt="movie-img" className="wm-card-image" />
            <div className="wm-card-text-wrapper">
                <h4 className="wm-card-text1">{title}</h4>
                <div className="wm-card-text2-wrapper">
                    <StarRating 
                        size={16} 
                        starLength={5} 
                        color='yellow' 
                        messages={['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']}  
                        starTextStyle={{ fontSize: "10px", color: "yellow" }} 
                        defaultRating={storedRating} 
                        newRating={setStoredRating} 
                        disabled 
                    />
                    <p className="wm-card-text2">🌟 {userRating}</p>
                    <p className="wm-card-text2">⌛ {watchTime} min</p>
                </div>
            </div>
        </div>
    )
}

export default WatchedMovieCard;

Image

The stars on the left of the movies is what the component looks like

API Documentation

StarRating Component

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

Disabled Stars

This is to only display the rating data of a user fetched from a database and disable user input

<StarRating
  starLength={5}
  color="#FFD700"
  size={24}
  disabled={true}
  newRating={handleNewRating}
/>

Compulsory Props

The props below are required to prevent any error and to enable you store the data from the rating functionalities

<StarRating
  starLength={5}
  color="#FFD700"
  size={24}
  defaultRating={storedRating} 
  newRating={handleNewRating}
/>

Messages Props

The messages props must contain values (strings) of the same length with the number value inputted in the starLength prop.

<StarRating
  starLength={5}
  messages={['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']}
  color="#FFD700"
  size={24}
  defaultRating={storedRating} 
  newRating={handleNewRating}
/>

Custom Star Style

<StarRating
  starLength={5}
  color="#FFD700"
  size={24}
  starStyle={{ display: 'flex', alignItems: 'center', gap: '5px' }}
  newRating={handleNewRating}
/>

Contributing

We welcome contributions to Star Product Rating! Please follow these steps:

• Fork the repository.
• Create a new branch (git checkout -b feature/YourFeature).
• Commit your changes (git commit -am 'Add new feature').
• Push to the branch (git push origin feature/YourFeature).
• Create a new Pull Request.

License

This project is licensed under the MIT License.

Changelog

[1.0.2] - 2024-09-11 Fixed React type declarations and updated README.

[1.0.0] - 2024-09-10 Initial release.