This is a ReactJS component that is a simple counter you can implement in your webapp. It is stylized to look like a seven segment analog display.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.
- Node Package Manager (NPM): https://nodejs.org/en/
- ReactJS: https://reactjs.org/
Easy install through npm:
npm install --save seven-segment-counter
- In JS file:
import SevenSegmentCounter from 'seven-segment-counter';
Put on your local machine:
- Download project
- Take app.js and put it into directory
- In JS file:
import SevenSegmentCounter from <path-to-file>;
- In render method:
<SevenSegmentCounter index={-1} height={75} width={300} onColor={"#FFFFFF"} offColor={"#444444"} backgroundColor={"#000000"}/>
- Properties:
Property | Type | Description |
---|---|---|
index | integer | starting value of counter - 1 |
width | integer | width of counter |
onColor | string of hex or color | color of numbers |
offColor | string of hex or color | color of the number inverse |
backgroundColor | string of hex or color | color of the background |
className | string | css class |
buttonTag | Object: {increment: , decrement: } | custom button label |
- Cody Abe - Initial work - CodeMasa
This project is licensed under the ISC License