The react-triple-toggle from mobilemadman2

react-triple-toggle's Introduction

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