react-triple-toggle Alternatives - React Toggle

Popularity

0.7

Growing

Activity

0.0

Stable

Stars 5

Watchers 2

Forks 1

Last Commit 21 days ago

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

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

*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.