Simple React UI Toggle

A simple iOS inspired toggle switch.

Installation

For PrivJs users:

$ npm config set @bc:registry https://r.privjs.com
$ npm login --registry https://r.privjs.com
$ npm install @bc/react-ui-toggle

For guest users:

$ npm config set //r.privjs.com/:_authToken <your-auth-token>
$  npm install @bc/react-ui-toggle

Usage

import { ReactUIToggle } from "@bc/react-ui-toggle";
import customToggle from "./styles/custom-toggle.css";

import darkIco from "./images/dark.svg";
import lightIco from "./images/sun.svg";

const App = () => {
  const [on, setOn] = React.useState(false);

  return (
    <>
      <p>React UI Toggle Default</p>
      <ReactUIToggle on={on} onClick={() => setOn(!on)} />
      <p>React UI Toggle Custom Background</p>
      <ReactUIToggle
        on={on}
        onClick={() => setOn(!on)}
        className={on ? "switch-custom__on" : "switch-custom__off"}
      />

      <p>React UI Toggle Custom with SVG icons</p>
      <ReactUIToggle
        on={on}
        onClick={() => setOn(!on)}
        className={on ? "switch__lightmode" : "switch__darkmode"}
      >
        {on && <img src={lightIco} />}
        {!on && <img src={darkIco} />}
      </ReactUIToggle>

      <p>React UI Toggle Custom Size</p>
      <ReactUIToggle
        on={on}
        onClick={() => setOn(!on)}
        className={customClasses}
        classNameToggle={classNameToggle}
      ></ReactUIToggle>
    </>
  );
};

custom-toggle.css

.switch-custom__off {
  background: navy;
}

.switch-custom__on {
  background: red !important;
}

.switch.on {
  background: blue;
}

.switch__darkmode {
  background: #000;
}

.switch__lightmode {
  background: rgb(179, 231, 10) !important;
}

/*Custom Size*/
.switch-custom__lightmode {
  background: rgb(231, 161, 10) !important;
}
.switch-custom {
  border-radius: 26px !important;
  width: 100px !important;
  height: 48px !important;
}

.switch-custom__toggle-on,
.switch-custom__toggle-off {
  border-radius: 1.5rem !important;
  height: 44px !important;
  width: 44px !important;
}

.switch-custom__toggle {
  left: 3.2rem !important;
}

Props