react-armstrong-count
Demo
Get Started
This is a light-weight and easy-to-use module created for React developers to solve the pains of debugging and setting up counters for their applications
Installation
npm install react-armstrong-count
or with yarn
yarn add react-armstrong-count
Usage
import React, { useState } from 'react';
import Armstrong from 'react-armstrong-count';
const TestPack = () => {
const[val, setVal] = useState('')
const[sBol, setBol] = useState('')
const getCount = c => setVal(c)
const handleSBol = () => setBol('start')
return (
<>
<Armstrong inter={1} startBol={sBol} stopTime={10} getCount={getCount} iValue={5}>
<section style={{display:'flex',height:'100vh',alignItems:'center',justifyContent:'center', flexFlow:'column', background:'#c0c0c000'}}>
<h1>{val}</h1>
<div style={{
background:'red',
width:`${val}rem`,
textAlign:'center',
padding: '1rem',
color: 'white',
}}>
{ Number(val) * 2 }
</div>
<button style={{
padding: '2rem',
marginTop: '3rem',
background: 'limegreen',
color: 'white',
border: 'none',
outline: 'none',
borderRadius: '3rem',
width: '10rem',
fontSize: '1.45rem',
}} onClick={handleSBol}>Start</button>
</section>
</Armstrong>
</>
);
}
export default TestPack;
Props
inter:
This number value represents the Interval of the counter, it takes single values like 1 for One second, 2 for Two seconds etc
startBol:
This prop must recieve a String value of 'start' for the counter to start
stopTime:
This prop recieves a number value, which is the value at which the counter stops
getCount:
This props takes a callback function, which recieves the count value(s) and can be safely used to setState(or useState) in the concerned Component
iValue:
This is the initial value the counter should start, if not Specified is default to Zero(0)
Contribution
-
Create your feature branch: git checkout -b feature-name
-
Commit your changes: git commit -am 'Some commit message'
-
Push to the branch: git push origin feature-name
-
Submit a pull request 😉😉
How Can I Thank You ?
Why not star the github repo? I'd love the attention! Why not share the link for this repository on Twitter or Any Social Media? And talk about it within your friends and event or workshop ? Spread the word!
Dont forget to follow me on Twitter
Thanks! NC Armstrong
License
This project is licensed under the MIT License