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 + Docs

Install

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

Usage

import React from 'react';

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

export default function Display() {
  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	'1em'	Any valid CSS width value for the width of each character. Useful with non-monospaced fonts
minLength	number	0	Minimum # of characters in the display
padDirection	string	'left'	If minLength > number of characters currently displayed, append blank characters to left or right side
splitWidth	string	'1px'	Any valid CSS width value for the width of the "axis" between the top and bottom of a character
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)	''	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

This component inherits the font family and font size from its parents. If you want to control those properties specifically for this display, wrap it in a container or pass a className with those properties defined.

License

MIT © Robin Yang