1.1.0 • Published 2 years ago
react-incrementer v1.1.0
react-incrementer
Handy React increase/decrease component.
Example
There is an example of this component.
Install
# With npm
npm i react-incrementer
# With yarn
yarn add react-incrementer
# Clone from git
git clone https://github.com/7JUMPER7/react-incrementer
Documentation
<Incrementer
value={number1}
setValue={setNumber1}
minValue={1} // defalut: 1
maxValue={100} // defalut: 100
fontSize={70} // defalut: 70
fontColor={"white"} // defalut: 'white'
buttonsSize={16} // defalut: 16
buttonsColor={"white"} // defalut: 'white'
buttonsHoverColor={"#87FF65"} // defalut: '#87FF65'
buttonsOffset={10} // defalut: 10
buttonsMargin={-4} // defalut: -4
animationTime={300} // defalut: 300
componentMargin={10} // defalut: 10
/>
Props
value
State that should change.
setValue
{function}
Function that changes the state.
minValue
(optional)
Minimum value of the state default 1
maxValue
(optional)
Maximum value of the state default 100
fontSize
(optional)
Numbers size default 70
fontColor
(optional)
Numbers color default 'white'
buttonsSize
(optional)
Size of the buttons default 16
buttonsColor
(optional)
Color of the buttons default 'white'
buttonsHoverColor
(optional)
Color of the buttons when mouseOver default '#87FF65'
buttonsOffset
(optional)
How far are the buttons from the number default 10
buttonsMargin
(optional)
How far apart are the buttons default -4
animationTime
(optional)
Speed of animation default 300
componentMargin
(optional)
Margin of entire component default 10
Example
import { Incrementer } from "react-incrementer";
import { useState } from "react";
export default function App() {
const [number, setNumber] = useState(1);
return (
<div className="App">
<Incrementer
value={number}
setValue={setNumber}
minValue={1} // defalut: 1
maxValue={100} // defalut: 100
fontSize={70} // defalut: 70
fontColor={"black"} // defalut: 'white'
buttonsSize={16} // defalut: 16
buttonsColor={"black"} // defalut: 'white'
buttonsHoverColor={"#87FF65"} // defalut: '#87FF65'
buttonsOffset={10} // defalut: 10
buttonsMargin={-4} // defalut: -4
animationTime={300} // defalut: 300
componentMargin={10} // defalut: 10
/>
</div>
);
}