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.
Experience the component in action: Live Demo
Install the package using your preferred package manager:
npm install react-char-fill
or
yarn add react-char-fill
or
bun add react-char-fill
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;
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;
This component displays a rating using characters and provides the ability to customize and interact with the rating.
-
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 islightgray
. -
fillColor
(string, optional): The color for the filled rating characters. Default isgold
. -
fontSize
(string, optional): The size of the rating characters. Default is24px
. -
interactive
(boolean, optional): If true, the rating can be changed by the user. Default istrue
. -
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.
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.
To publish a new version of the react-char-fill
package, follow these steps:
-
Build and Preview: First, build and preview the project to ensure everything works as expected.
bun run bp
This command will build the library and start a preview server. Verify that the build is successful and the preview behaves as intended.
-
Commit Changes: If everything works fine, commit any changes made to the repository.
git add . git commit -m "Your commit message"
-
Bump Version: After committing, bump the version number. This will update the
package.json
version and create a new commit with the version bump.bun run bump
-
Publish: Finally, publish the package to npm and GitHub Packages.
bun run publish
This command will build the library, publish the package to npm and GitHub Packages, and ensure everything is correctly versioned and released.
By following these steps, you can ensure that each release is built, tested, and published consistently.
This project is licensed under the MIT License. See the LICENSE file for details.