react-calculator-input

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #rust #linux #macos #nodejs #windows #awesome #vue #security #mcp #ios

react-calculator-input

(★ 8)

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

react-calculator-input 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# React Calculator Input

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

[DEMO](https://silviajoy.github.io/react-calculator-input/)

## 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](https://github.com/silviajoy/numeric-input-component/blob/master/lib/index.scss).

## 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 `input`tag 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:

**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:

react-calculator-input

react-calculator-input 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-calculator-input

react-calculator-input 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README