React-split-flap-display NPM

React Split Flap Display

A React component that mimics a Split-Flap/Solari display, cos I like Solari boards & wanted to practice creating NPM modules.

Live Demo

Install

npm install --save react-split-flap-display

Usage

import React, { Component } from 'react';

import SplitFlapDisplay from 'react-split-flap-display';

class Display extends Component {
  render() {
    return <SplitFlapDisplay characterSet={['1', '2', '3', '4', ':']} value="12:34" />;
  }
}

Props

Key	Type	Default	Description
background	string	'#000000'	Hex or rgb() string for the display's background
borderColor	string	'#dddddd'	Hex or rgb() string for the color of the border between characters
borderWidth	string	'1px'	Any valid CSS width value for the width of the border between characters
characterSet	Array of strings (required)	null	The array of characters for the display to flip through
characterWidth	string	'1rem'	Any valid CSS width value for the width of each character. Useful with non-monospaced fonts
fontSize	string	'1rem'	Any valid CSS font-size value
minLength	number	null	Minimum # of characters in the display
padDirection	string	'left'	If minLength > number of characters currently displayed, append blank characters to left or right side
step	number	200	Sets the speed (ms) of flips
textColor	string	'#dddddd'	Hex or rgb() string for color of the display characters
value	string (required)	null	The string of characters to display or flip to
withSound	boolean or string	null	Optionally load and play a sound with every flip.Sound duration must be less than or equal to `step` duration.`true` loads an mp3 I recorded of a single Vestaboard bit flipping

For characterSet, there are three convenience constants that ship with this component from react-split-flap-display/constants (you can see how they might be used in the example):

NUMERIC: [0-9]\ ALPHA: whitespace ' ' + [A-Z]\ PUNCTUATION: the non-alphanumeric characters found in a Vesta Board