1.0.11 • Published 10 months ago

star-product-rating v1.0.11

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Star Product Rating

npm npm npm

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

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

Star Product Rating

API Documentation

StarRating Component

PropTypeDefaultDescription
starLengthnumber5Number of stars to display
colorstring#000000Color of the stars
sizenumber24Size of each star
disabledbooleanfalseDisable interaction with the stars
starStyleobject{}Custom styles for the star container
starTextStyleobject{}Custom styles for the rating text
messagesarray['Terrible', 'Bad', 'Okay', 'Good', 'Amazing']Array of rating messages
defaultRatingnumber1Default rating value
newRatingfunctionCallback 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.

1.0.11

10 months ago

1.0.10

10 months ago

1.0.9

10 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

10 months ago

1.0.5

10 months ago

1.0.4

10 months ago

1.0.3

10 months ago

1.0.2

10 months ago

1.0.1

10 months ago

1.0.0

10 months ago