React-dipswitch NPM

An interactive, customizable, SVG-based dipswitch component for react.

Props

The component takes the following props.

Prop	Type	Description
`switchCount`	number	The number of switches available on the dipswitch
`value`	number	The integer value of the dipswitch. The dipswitch will display this value in binary.
`width`	number	Width of the dipswitch housing. The height will be scaled automatically based on this value
`mostSignificantBit`	string	If `left`, the most significant bit will be on the left side of the dipswitch. If `right` (default), it will display on the right side.
`onValueChange`	function	Callback function to invoke when the value of the switch has changed. Function signature is `function(value){}`.
`onSwitchClick`	function	Callback function to invoke when a switch has been clicked. Function signature is `function(index){}` The index of the least significant bit is always 0.
`switchColor`	string	Color of the switch.
`channelColor`	string	Color of the channel that the switch sits in.
`bodyColor`	string	Color of the switch dipswitch housing.
`labelColor`	string	Color of the number labels.

Installation

npm install react-dipswitch

Usage

Basic Example

    <Dipswitch switchCount={4} value={16}/>

Controlled Example

    import React, { Component } from "react";
    import Dipswitch from "react-dipswitch";
    
    class ControlledDipswitch extends Component {
      constructor(props) {
        super();
        this.state = { value: 127 };
        this.onValueChange = this.onValueChange.bind(this);
      }
    
      onValueChange(value) {
        this.setState({ value });
      }
    
      render() {
        return (
          <div>
            <Dipswitch
              switchCount={8}
              value={this.state.value}
              onValueChange={this.onValueChange}
              width={100}
            />
            {this.state.value}
          </div>
        );
      }
    }
    
    export default ControlledDipswitch;

TO DO

Allow for switches to be inverted for cases where "on" is down.
Allow for for height to be set instead of width or width+height for custom scaling.
Allow for value to be supplied as an array of truthy/falsey values
Allow for value to be output as an array of true/false