DEV Community

Cover image for Animate Checkbox in React
Dhairya Shah
Dhairya Shah

Posted on • Originally published at codewithsnowbit.hashnode.dev

Animate Checkbox in React

Hello Folks πŸ‘‹

What's up friends, this is SnowBit here. I am a young passionate and self-taught developer and have an intention to become a successful developer.

Today, I am here again with cool stuff and I hope you learn something new. So, let's get started.

demo
So, let's see how to animate like this,

Step 1 - Install this package

Install this npm package to your React application

$ npm i react-animated-checkbox
Enter fullscreen mode Exit fullscreen mode

Step 2 - Import the package

import CheckBox from "react-animated-checkbox";
Enter fullscreen mode Exit fullscreen mode

Step 3 - Creating Checkbox

<CheckBox
        checked={checked}
        checkBoxStyle={{
          checkedColor: "#34b93d",
          size: 100,
          unCheckedColor: "#b8b8b8"
        }}
        duration={400}
        onClick={() => setChecked(true)}
      />
Enter fullscreen mode Exit fullscreen mode

Full Source Code

import CheckBox from "react-animated-checkbox";
import { useState } from "react";
export default function App() {
  const [checked, setChecked] = useState(false);
  return (
    <div className="App">
      <h1>Hello world</h1>
      <CheckBox
        checked={checked}
        checkBoxStyle={{
          checkedColor: "#34b93d",
          size: 100,
          unCheckedColor: "#b8b8b8"
        }}
        duration={400}
        onClick={() => setChecked(true)}
      />
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Thank you for reading, have a nice day!
Your appreciation is my motivation 😊

Top comments (5)

Collapse
 
alibahaari profile image
Ali Bahaari

Wonderful!
Please put the GitHub repository link for contribution causing the project to be advanced.

Collapse
 
dhairyashah profile image
Dhairya Shah

Do you mean npm package repository?

Collapse
 
alibahaari profile image
Ali Bahaari

I thought the package you've written has a repository on GitHub or GitLab. Thus I asked for sharing for contribution.

Thread Thread
 
dhairyashah profile image
Dhairya Shah

I haven't written the package, I have just found cool package so I mind it to share with folks. Anyways, thank you for reading

Thread Thread
 
alibahaari profile image
Ali Bahaari

You're welcome.