7-segment-display NPM

Seven Segment Display

A minimal react component for seven segment display.

npm.io

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 number={3}></SevenSegmentDisplay>
            <SevenSegmentDisplay ledColorOn={"green"} number={7}></SevenSegmentDisplay>
            <SevenSegmentDisplay
                ledBorder={"transparent"}
                ledColorOn={"black"}
                ledColorOff={"black"}
                number={3}
            ></SevenSegmentDisplay>
        </div>
    );
}

export default App;

npm.io

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