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
License
MIT