Popularity
0.6
Stable
Activity
0.0
Declining
4
1
1
README
React multi toggle component.
Installation
npm i react-triple-toggle --save
Usage
Uncontrolled component
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Toggle } from "react-triple-toggle";
function App() {
return <Toggle />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Controlled component
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Toggle } from "react-triple-toggle";
let initialData = {
left: false,
right: false,
middle: true
};
function App() {
let [data, setData] = useState(initialData);
const handleChange = event => {
switch (event) {
case "left":
return setData({ left: true, right: false, middle: false });
case "middle":
return setData({ left: false, right: false, middle: true });
case "right":
return setData({ left: false, right: true, middle: false });
default:
return event;
}
};
return <Toggle checked={data} onChange={(e) => handleChange(e)} />;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
API
Prop | Type | Description |
---|---|---|
checked |
object | Use this if you want to treat the toggle as a controlled component. |
defaultChecked |
object | Use this if you want to treat the toggle as an uncontrolled component. |
onChange |
function | A function which acts as a callback when the toggle is changed. |
disabled |
boolean | If true , the toggle is disabled. If false , the toggle is enabled |
Built With
- React - A JavaScript library for building user interfaces
License
MIT Licensed. Copyright (c) George Bardi 2019.
*Note that all licence references and agreements mentioned in the react-triple-toggle README section above
are relevant to that project's source code only.