@busshi/react-switch

React-Switch

A custom React switch component reusable without extra dependency (only React dependencies).

Installation

yarn add @busshi/react-switch or npm install @busshi/react-switch

Custom properties

Note

Colors can be passed as prop as hex (#FFF), rgb (rgb(255, 255, 255)) or as noun (white).

Usage

import Switch from "@busshi/react-switch";
import { useState } from "react";

function App() {
  const [isChecked, setIsChecked] = useState(false);

  return (
    <div>
      <Switch
        checked={isChecked}
        onChange={() => {
          setIsChecked(!isChecked);
        }}
        width="40px"
        height="20px"
        borderRadius="20px"
        backgroundColor="#ddd"
        thumbSize="20px"
        thumbColor="white"
        checkedBackgroundColor="#306FDB"
      />
    </div>
  );
}

export default App;