Repository files navigation

A simple React component that renders a numeric input field with a calculator that pops up on focus.

DEMO

Install the package

npm install react-calculator-input

and import the css in your application

import '[path_to_node_modules_folder]/react-calculator-input/lib/index.scss'

or copy it in your own file, you can find thescss there.

Import the component

import NumericInput from 'react-calculator-input'

To use it, you need to set theid prop, which will be theid attribute of theinputtag in thehtml (and thefor attribute of thelabel tag, if any).

Other props you can play with:

id
The value of this prop will be theid attribute of theinput tag and of thefor attribute of thelabel tag, if any.

initialValue
The initialvalue attribute of theinput tag. Default is 0.

name
The value of this prop will be thename attribute of theinput tag.

className
The value of this prop will be theclass attribute of theinput tag.

label
The value of this prop will be the content of thelabel tag.If you want an empty label, just type in the empty string"" .

labelPosition
Define the position of thelabel tag in the html order. It can be either"top" or"bottom". The default value is"top". If you setlabelPosition="bottom" thehtml will look something like this:

<input type="number"><label for="myinput"> Age </label>

labelClassName
The value of this prop will be theclass attribute of thelabel tag.

calculatorBackground
You should pass acss color property to this prop and you can set the background color of the calculator that pops up oninput focus. Default color is#666

calculatorKeyColor
You should pass acss color property to this prop either. In this case you decide the color of the keypad keys. Default color is#ccc.

format
With this prop you decide if the input value will accept"float"ing point numbers or"integer"s only. Default value is"float".

<NumericInput label="Age" name="age"/>

will result in the following html:

<div>    <label for="myinput">Age</label>    <input type="number" name="age" value="0">    <!-- calculator stuff --></div>