Popularity
0.6
Growing
Activity
0.3
-
4
1
1

Monthly Downloads: 0
Programming language: JavaScript
Tags: UI Components     Toggle     Form Components    
Add another 'Toggle' Library

README

React multi toggle component.

Alt text

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);

Edit react-triple-toggle-2

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);

Edit react-triple-toggle

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.