react-dipswitch

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

Live Demo

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

License

MIT