https://github.com/nachovigilante/react-7-segment-display

A React component that simulates a 7-segment display.
https://github.com/nachovigilante/react-7-segment-display

7-segment 7-segment-display 7-segment-display-module react react-7-segment-display reactjs

Last synced: 11 months ago
JSON representation

A React component that simulates a 7-segment display.

• Host: GitHub
• URL: https://github.com/nachovigilante/react-7-segment-display
• Owner: nachovigilante
• License: mit
• Created: 2022-07-19T08:11:25.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2025-04-04T23:51:41.000Z (over 1 year ago)
• Last Synced: 2025-04-16T01:12:25.845Z (about 1 year ago)
• Topics: 7-segment, 7-segment-display, 7-segment-display-module, react, react-7-segment-display, reactjs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-7-segment-display
• Size: 1.31 MB
• Stars: 16
• Watchers: 1
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React 7-Segment Display

A React component that simulates a 7-segment display.

![Display demo](./assets/Display.gif)

## Usage

### Installation

`npm install react-7-segment-display`

### Adding the component to your project

```jsx

import { Display } from "react-7-segment-display";

const App = () => ;

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                         | `number`  | `250`         |

| count          | Amount of digits on the display                            | `number`  | `2`           |

| bakgroundColor | Color of the background                                    | `string?` | n/a           |

| skew           | Whether the digits are skewed or not                       | `boolean` | `false`       |

### Valid values for `value`

You can dislay a number in decimal or hexadecimal, giving its value by a number or a string.

![Display demo](./assets/Display_hex.gif)

### 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.

![Display demo](./assets/Display_skew.gif)

## License

MIT License