@etzshally/reate

@etzshally/reate is a React component designed for creating simple star ratings in day-to-day applications.

Installation

Install the package using npm:

npm i @etzshally/reate

Usage

Stars Component

import React from "react";
import { Stars } from "@etzshally/reate";

const MyRatingComponent = () => {
  return (
    <Stars
      rating={3.5}             // Initial rating (between 0 and 5)
      filledColor="#ffcc00"    // Color for filled stars
      unfilledColor="#d3d3d3"  // Color for unfilled stars
    />
  );
};

export default MyRatingComponent;

The Stars component generates a set of stars based on the provided rating, filled color, and unfilled color.

API

Stars({ rating, filledColor, unfilledColor }: StarsProp): ReactElement

• rating: The rating value (between 0 and 5).
• filledColor: The color of filled stars. Accepts a hex code or a named color.
• unfilledColor: The color of unfilled stars. Accepts a hex code or a named color.

Example

import React from "react";
import { Stars } from "@etzshally/reate";

const MyApp = () => {
  return (
    <div>
      <h1>Product Rating</h1>
      <Stars rating={4.2} filledColor="#66ccff" unfilledColor="#d3d3d3" />
    </div>
  );
};

export default MyApp;

Keywords

• react
• rating
• stars
• component
• UI
• frontend

Contributing

Feel free to contribute by opening issues or submitting pull requests on GitHub.

Make sure to replace "Etzshally" with your actual GitHub username in the URLs and adjust the details as needed for your project.