Package Exports

react-char-fill
react-char-fill/dist/react-char-fill.es.js
react-char-fill/dist/react-char-fill.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-char-fill) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Char Fill

A versatile React component library for creating customizable character-based ratings. Ideal for star ratings and other similar applications, with fine-grained control over rating steps, colors, and interactivity.

📺 Live Demo

Experience the component in action: Live Demo

🚀 Installation

Install the package using your preferred package manager:

npm install react-char-fill

yarn add react-char-fill

bun add react-char-fill

📚 Usage

Basic Example

import CharacterRating from 'react-char-fill';

const App = () => {
  return (
    <CharacterRating
      rating={3.5}
      character="★"
      maxRating={5}
      emptyColor="lightgray"
      fillColor="gold"
      interactive={false}
      step={0.5}
    />
  );
};

export default App;

Advanced Example

import CharacterRating from 'react-char-fill';

const App = () => {
  return (
    <CharacterRating
      rating={4.2}
      character="☆"
      maxRating={10}
      emptyColor="#e0e0e0"
      fillColor="#ffeb3b"
      fontSize="32px"
      interactive={true}
      step={0.1}
    />
  );
};

export default App;

🔧 API Documentation

`CharacterRating`

This component displays a rating using characters and provides the ability to customize and interact with the rating.

Props

rating (number, required): The current rating value.
character (string, required): The character used to represent the rating.
maxRating (number, required): The maximum rating value.
emptyColor (string, optional): The color for the empty rating characters. Default is lightgray.
fillColor (string, optional): The color for the filled rating characters. Default is gold.
fontSize (string, optional): The size of the rating characters. Default is 24px.
interactive (boolean, optional): If true, the rating can be changed by the user. Default is true.
step (number, required): The increment step for the rating value.
onMouseMove (function, optional): Function to call on mouse move.
onClick (function, optional): Function to call on click.
onKeyDown (function, optional): Function to call on key down.

🤝 Contributing

Contributions are welcome! Please follow these steps to contribute:

Fork the repository.
Create a new branch with your changes: git checkout -b my-feature-branch.
Commit your changes: git commit -am 'Add new feature'.
Push to the branch: git push origin my-feature-branch.
Create a pull request.

📄 License

This project is licensed under the MIT License. See the LICENSE file for details.