- Notifications
You must be signed in to change notification settings - Fork14
A CSS & React built Split Flap or Solari display
License
robonyong/react-split-flap-display
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A React component that mimics a Split-Flap/Solari display, cos I like Solari boards & wanted to practice creating NPM modules.
npm install --save react-split-flap-display
importReactfrom'react';importSplitFlapDisplayfrom'react-split-flap-display';exportdefaultfunctionDisplay(){return<SplitFlapDisplaycharacterSet={['1','2','3','4',':']}value="12:34"/>;}
| 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 |
ForcharacterSet, there are three convenience constants that ship with this component fromreact-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 aVesta 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 aclassName with those properties defined.
MIT ©Robin Yang
About
A CSS & React built Split Flap or Solari display
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors2
Uh oh!
There was an error while loading.Please reload this page.