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
Props | Type | Default value | Required / Optional |
---|---|---|---|
checked | boolean | required | |
onChange | function | required | |
width | string | 40px | optional |
height | string | 20px | optional |
borderRadius | string | 20px | optional |
backgroundColor | string | #ddd | optional |
thumbSize | string | 20px | optional |
thumbColor | string | white | optional |
checkedBackgroundColor | string | #306FDB | optional |
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;