Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robonyong/react-split-flap-display
A CSS & React built Split Flap or Solari display
https://github.com/robonyong/react-split-flap-display
react solari split-flap
Last synced: 3 months ago
JSON representation
A CSS & React built Split Flap or Solari display
- Host: GitHub
- URL: https://github.com/robonyong/react-split-flap-display
- Owner: robonyong
- License: mit
- Created: 2018-02-12T15:52:05.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-16T09:51:43.000Z (5 months ago)
- Last Synced: 2024-07-13T19:43:48.432Z (4 months ago)
- Topics: react, solari, split-flap
- Language: TypeScript
- Homepage: https://robonyong.github.io/react-split-flap-display/
- Size: 5.83 MB
- Stars: 33
- Watchers: 1
- Forks: 12
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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.
[](https://www.npmjs.com/package/react-split-flap-display)
[Live Demo](http://robonyong.github.io/react-split-flap-display/)
## Install
```bash
npm install --save react-split-flap-display
```
## Usage
```jsx
import React, { Component } from 'react';
import SplitFlapDisplay from 'react-split-flap-display';
class Display extends Component {
render() {
return ;
}
}
```
### 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](https://www.vestaboard.com/ces/)
## License
MIT © [Robin Yang](https://github.com/robonyong)