react starred: Rating Component for your react Project

Introduction

I was working on an ionic project and in the project, I had to create a custom star rating component and I thought why not create similar functionality in React and that’s why I decided to start this as a weekend project and publish it on opensource i.e react starred!

Find the project

Prerequisites

This module is meant to be used in react projects.

How to install

This component directly provides you the Stars rating component with all the options/settings you need.

Install this module using the following command in your project directory:

npm i -S react-starred@latest

Usage

one the module is installed in the project, import the module into the file you want to use with the following command:

import Stars from 'react-starred';

once imported, you can use the Stars component with the following syntax:

<Stars given={3} on={5} updateGiven={yourMethodToUpdateGivenStarsValue} />

The best way to use this component is as follows:

const App = () => {
    const [given, updateGiven] = useState(3);
    useEffect(() => {
        console.log(given); /* you will get the updated given stars count here */
    });
    return (
        <div>
            <Stars given={given} on={10} updateGiven={updateGiven} />
        </div>
    );
};

render(<App />, document.getElementById("app"));

Demo

What’s Next?

Now that the project is live, there are still a lot of tasks pending which could improve the module even more.

Project level improvements

  • Writing and implementing unit tests using Jest and Enzyme.
  • Adding CI (learning more about circle ci/ Travis ci etc.)
  • Adding code coverage (learning about Instanbul js)

Feature level Improvements

  • props to change the color of star icon used
  • props to use a different icon instead of a star if needed
  • props to modify the size of the star icon used

Conclusion

It took me around 4-5 hours to properly develop react-starred (learning react hooks and implementing accordingly). It was really fun for me!!

If this module saved your project’s development time, do give a star for my project and if possible let me know your feedbacks/views about the module in the comments section below or through any of the social media channels.

1