react-toggle-btn
v1.0.5
Published
toggle button component
Downloads
20
Readme
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