A CSS & React built Split Flap or Solari display

React Split Flap Display

A React component that mimics a Split-Flap/Solari display.

Install

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

or

yarn add react-split-flap-display

This package has a peer dependency on styled-components

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	'1em'	Any valid CSS width value for the width of each character. Useful with non-monospaced fonts
fontSize	string	'1em'	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

For characterSet, there are three convenience constants that ship with this component (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