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

License

MIT © Robin Yang