Posted on Jan 25, 2022 • 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.

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

Step 2 - Import the package

import CheckBox from "react-animated-checkbox";

Step 3 - Creating Checkbox

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

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> ); }