react-triple-toggle

React multi toggle component

Programming language: JavaScript

Tags: UI Components     Toggle     Form Components    

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.