lite-react-rating

lite-react-rating

A customizable React component for displaying star ratings.

Installation

Install the package using npm:

npm install lite-react-rating

Or with yarn:

yarn add lite-react-rating

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 'lite-react-rating';

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 'lite-react-rating';

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.