<commit_before># Coming soon
This component is still in development. Please do not use until 1.0.0!

# React Numeric Input

Number input component that can replace the native number input wich is not yet very well supported and where it is, it does not have the same appearance across the browsers. Additionally this component offers more flexible options and can be used for
any values (different representations of the internal value)

## Installation
```sh
npm install react-number-nput --save
```
Then in your scrips:
```js
// es6
import NumericInput from 'react-numeric-input';
// or es5
var NumericInput = require('react-numeric-input');
```

## Usage
##### Minimal Usage:
This will behave exactly like `<input type="number">`. It will create an empty numeric input that starts changing from zero. The difference that this works on any browser and does have the same appearance on each browser.
```jsx
<NumericInput/>
// or:
<NumericInput className="form-control"/>
```

##### Typical Usage
Most of the time you will need to specify `min`, `max` and `value`:
```jsx
<NumericInput min={0} max={100} value={50}/>
```

#### Working with floats
You can use to use `step` and `precision` props to make your input working with floating point numbers:
```jsx
<NumericInput step={0.1} precision={2} value={50.3}/>
```

#### Custom format
By default the component displays the value number as is. However, you can provide your own `format` function that will be called with the numeric value and is expected to return the string that will be rendered in the input:
```jsx
function myFormat(num) {
    return num + '$';
}
<NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/>
```

## Options

Option       | Type     |Default
-------------|----------|:-------:
**value**    |`number`  |null
**min**      |`number`  |0
**max**      |`number`  |100
**step**     |`number`  |1
**precision**|`number`  |0
**parse**    |`function`|parseFloat
**format**   |`function`|null

Any other option is passed directly the input created by the component. Just don't forget to camelCase the attributes. For example `readonly` must be `readOnly`.<commit_msg>More readme<commit_after># Coming soon
This component is still in development. Please do not use until 1.0.0!

# React Numeric Input
Number input component that can replace the native number input which is not yet
very well supported and where it is, it does not have the same appearance across
the browsers. Additionally this component offers more flexible options and can
be used for any values (differently formatted representations of the internal
numeric value).

## Installation
```sh
npm install react-number-nput --save
```
Then in your scrips:
```js
// es6
import NumericInput from 'react-numeric-input';
// or es5
var NumericInput = require('react-numeric-input');
```

## Usage
##### Minimal Usage:
This will behave exactly like `<input type="number">`. It will create an empty
numeric input that starts changing from zero. The difference that this works on
any browser and does have the same appearance on each browser.
```jsx
<NumericInput/>
// or:
<NumericInput className="form-control"/>
```

##### Typical Usage
Most of the time you will need to specify `min`, `max` and `value`:
```jsx
<NumericInput min={0} max={100} value={50}/>
```

#### Working with floats
You can use `step` and `precision` props to make your input working with
floating point numbers:
```jsx
<NumericInput step={0.1} precision={2} value={50.3}/>
```

#### Custom format
By default the component displays the value number as is. However, you can
provide your own `format` function that will be called with the numeric value
and is expected to return the string that will be rendered in the input:
```jsx
function myFormat(num) {
    return num + '$';
}
<NumericInput precision={2} value={50.3} step={0.1} format={myFormat}/>
```

## Options
Option       | Type     |Default
-------------|----------|:-------:
**value**    |`number`  |null
**min**      |`number`  |0
**max**      |`number`  |100
**step**     |`number`  |1
**precision**|`number`  |0
**parse**    |`function`|parseFloat
**format**   |`function`|null

Any other option is passed directly the input created by the component. Just
don't forget to camelCase the attributes. For example `readonly` must be `readOnly`.
See examples/index.html for examples.

## Styling
This component comes with styles written in LESS and precompiled to CSS in
`src/style`. It's up to you to decide how to use them but here are a few options:
* Copy `src/style/NumericInput.css` code to your css
* Setup less preprocessing from `src/style/NumericInput.less` to wherever you need.
* Use modern tool like webpack and then just do `require('node_modules/react-numeric-input/src/style/NumericInput.less');`.
  See `examples/examples.jsx` for example.

## License
MIT
{'fraction_non_alphanumeric': 0.12912541254125412, 'fraction_numerical': 0.011963696369636964, 'mean_word_length': 4.186096256684492, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '696682', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1350, 'n_words': 624}