react-toggle-btn

Props

The component takes the following props.

Prop	Type
mainColor	string
subColor	string
borderColor	string
FrameWidth	string
FrameHeight	string
CircleWidth	string
CircleHeight	string
CircleTop	string
CircleLeft	string
CircleRight	string
onChange	function

Installation

npm i react-toggle-btn

Usage

import ToggleButton from "react-toggle-btn";

Sample Code

import { useRef } from "react";
import "./App.css";

import ToggleButton from "react-toggle-btn";

function App() {
  const backgroundRef = useRef(null);

  // This function is a sample for changing color theme.
  const changeColorHandler = (event) => {
    if (event.target.checked) {
      backgroundRef.current.style.backgroundColor = "#000000";
    } else {
      backgroundRef.current.style.backgroundColor = "#ffffff";
    }
  };

  return (
    <div className="App" ref={backgroundRef}>
      <ToggleButton onChange={changeColorHandler} />
    </div>
  );
}

License

MIT