1.1.2 • Published 2 years ago
@claycot/react-7-segment-display v1.1.2
React 7-Segment Display
A React component that simulates a 7-segment display.
Usage
Installation
npm install react-7-segment-display
Adding the component to your project
import { Display } from "react-7-segment-display";
const App = () => <Display value="77" />;
export default App;Props
| Name | Decription | Type | Default value |
|---|---|---|---|
| value | Value displayed on the display (in decimal or hexadecimal) | any | null |
| color | Color of the display segments when turned on | string | "red" |
| height | Total height of the display digits, in pixels | number | 250 |
| count | Amount of digits on the display | number | 2 |
| backgroundColor | Color of the background (defaults to transparent) | string? | n/a |
| skew | Whether the digits are skewed or not | boolean | false |
| paddingInner | Padding to use around the digits | string | "20px" |
| paddingOuter | Padding to use around the display | string | "20px" |
| blankChar | Character to display in each digit when no value provided | string | "-" |
| leadingZeroes | Enable leading zeroes for short values | boolean | true |
| rhsOnlyFirstDigit | Draw the first digit as a blank or 1 only | boolean | false |
Valid values for value
You can dislay a number in decimal or hexadecimal, giving its value by a number or a string.
Skew prop
skew is a boolean that determines whether the digits are skewed or not. You can use it to make the display look more like a real 7-segment display.
License
MIT License
1.1.2
2 years ago