Rating Component

The Rating component is a React component designed to provide a customizable star rating input. This component allows users to provide ratings by interacting with star icons. The component handles mouseover events to display ratings and supports customization through various props.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the Rating component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-rating

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-rating

Once you have the required dependencies installed, you can start using the Rating component in your React application.

Usage

The Rating component provides a star-based rating input that allows users to provide ratings through interaction. It supports customization through various props.

To use the component, import it and include it in your JSX:

import React from 'react';
import {Rating} from '@bolttech/atoms-rating';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations";

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <Rating
        value={3} // Default value
        dataTestId="rating-component"
        onClick={(rating) => console.log(`Selected rating: ${rating}`)}
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Rating component accepts the following props:

| Prop | Type | Description | |--------------|---------------|---------------------------------------------------| | value | number | The initial rating value (number of filled stars).| | dataTestId | string | The data-testid attribute for testing purposes. | | onClick | function | A callback function triggered on star selection. |

Example

Here's an example of using the Rating component:

<Rating
  value={4}
  dataTestId="rating-component"
  onClick={(rating) => console.log(`Selected rating: ${rating}`)}
/>

This will render a Rating component with an initial rating of 4 filled stars and a callback function to handle the selection.

Contributing

Contributions to the Rating component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.