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