Animate Checkbox in React

#javascript #react #tutorial #webdev

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