react-triple-toggle-switch

This is a simple three state toggle switch built with/for react projects.

Motivation

I couldn't find a three stage toggle switch that was ready made and suited my needs, so I created one and figured that others might need one as well.

Example

import React from 'react';
import TripleToggleSwitch from 'react-triple- 
toggle-switch';

const Example = (props) => {
  const labels = {
    left: {
      title: 'left',
      value: 'left'
    },
    right: {
      title: 'right',
      value: 'right'
    },
    center: {
      title: 'center',
      value: 'center'
    },
  }

  const onChange = (value) => 
    console.log('value',value)

  return (
    <div>
      <TripleToggleSwitch
        labels={labels}
        onChange={onChange}
      />
    </div>
  );
}

export default Example

Installation

NPM

npm install react-triple-toggle-switch

More to come

This is very much a work in progress. I am in the process of adding the ability to adjust sizing and styling of the component out of the box. I also have plans to add the use of symbols as well as a loading/spinner state for the switch. Any other ideas or contributions are welcome!