7-segment-display

7 segment display component for react

Usage no npm install needed!

<script type="module">
  import SegmentDisplay from 'https://cdn.skypack.dev/7-segment-display';
</script>

README

Seven Segment Display

A minimal react component for seven segment display.

Installation

npm

npm install 7-segment-display --save

yarn

yarn add 7-segment-display

Playground

Example

import React from 'react';
import SevenSegmentDisplay from "7-segment-display"

function App() {

  return (
    <div className="App">
        <SevenSegmentDisplay character={3}></SevenSegmentDisplay>
        <SevenSegmentDisplay ledColorOn={"green"} character={7}></SevenSegmentDisplay>
        <SevenSegmentDisplay ledBorder={"transparent"} ledColorOn={"black"} ledColorOff={"black"} character={3}></SevenSegmentDisplay>
    </div>
  );
}

export default App;

Notes

The component can only display 1 digit number (0 ~ 9). Anything else will display an invalid indicator ( G segment ). To-Do: A multiple digits component

Thanks :D