A React component that simulates a 7-segment display.
npm install react-7-segment-display
import { Display } from "react-7-segment-display";
const App = () => <Display value="77" />;
export default App;
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 |
You can dislay a number in decimal or hexadecimal, giving its value by a number or a string.
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.
MIT License