Seven Segment Counter

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.

Getting Started

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.

Prerequisites

• Node Package Manager (NPM): https://nodejs.org/en/
• ReactJS: https://reactjs.org/

Installing

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>;

Usage:

• 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

Built With

• ReactJS - The web framework used
• Babel - File converter
• Webpack - Module bundler

Authors

• Cody Abe - Initial work - CodeMasa

License

This project is licensed under the ISC License