React Calculator Input

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

DEMO

Set Up

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 the scss there.

Usage

Import the component

import NumericInput from 'react-calculator-input'

To use it, you need to set the id prop, which will be the id attribute of the inputtag in the html (and the for attribute of the label tag, if any).

Other props you can play with:

| Prop | Prop Type | Required | Default | | ------ | ------ |------ | ----- | | id | String | Required | | initialValue | number | | 0 | name | String | | | className | String | | | label | String | | | labelPosition | ["bottom", "top"] | | "top" | labelClassName | String | | | calculatorBackground | String | | "#666" | calculatorKeyColor | String | | "#ccc" | format | ["float", "integer"] | | "float"

id
The value of this prop will be the id attribute of the input tag and of the for attribute of the label tag, if any.

initialValue
The initial value attribute of the input tag. Default is 0.

name
The value of this prop will be the name attribute of the input tag.

className
The value of this prop will be the class attribute of the input tag.

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

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

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

labelClassName
The value of this prop will be the class attribute of the label tag.

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

calculatorKeyColor
You should pass a css 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".

Example

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

will result in the following html:

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