# cm-apt-numeric-text-box

> An input box to hold numeric values

Latest version **0.0.4** (published 2017-10-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install cm-apt-numeric-text-box
pnpm add cm-apt-numeric-text-box
yarn add cm-apt-numeric-text-box
bun add cm-apt-numeric-text-box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2017-10-24 |
| First published | 2017-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Salman Hossain |
| Maintainers | codemen |
| Keywords | numeric-text-box, codemen, demo |

## Links

- npm: https://www.npmjs.com/package/cm-apt-numeric-text-box
- npm.io page: https://npm.io/package/cm-apt-numeric-text-box

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.6.1
- [react-dom](https://npm.io/package/react-dom.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Recent versions

- 0.0.4 (latest) — 2017-10-24
- 0.0.3 — 2017-10-23
- 0.0.2 — 2017-10-20
- 0.0.1 — 2017-10-19

## README

Apptudio Numeric Text Box
=====================

An input box to present floating numeric values.

### Usage

```
import React, { Component } from 'react';
import NumericInput from 'cm-apt-numeric-text-box';

export default class App extends Component {
    constructor (props) {
        super(props);

        this.state = {
            value: ''
        }
    }

  	render() {
        var stateObj = this.state;

    	return (
            <div>
                <NumericInput
                    ref='numeric-input'
                    style={{
                        maxWidth: '500px'
                    }}
                    inputClassName='form-control' // Enables bootstrap form input class
                    defaultValue={80.22} // Sets the default value when this component gets mounted for the first time, doesnt work if `value` property is already set
                    value={stateObj.value} // Sets the value
                    onChange={(e) => {
                        this.setState({
                            value: e.target.value
                        })
                    }}
                    />
            </div>
    	);
  	}
}
```

#### Data Getter (manual purpose)

```
this.refs['numeric-input'].getValue(); // Returns the original input value in the box
this.refs['numeric-input'].getValue(true); // Returns the floating numeric value equivalent to the value in the box
```

#### Data Setter (manual purpose)

```
this.refs['numeric-input'].setValue('123.23');
this.refs['numeric-input'].setValue(123.23);
```


### Props

Name | Type | Default | Description
--- | --- | --- | ---
style | *object* | `undefined` | Applies style to the root element of the component
className | *string* | `undefined` | Applies class to the root element of the component
inputStyle | *object* | `undefined` | Applies style to the input box element of the component
inputClassName | *string* | `undefined` | Applies class to the input box element of the component
align | *string* : `right` or `left` or `center` | `right` | Aligns the floating number in respect with its container
negationStyle | *object*  | `{color: '#d61a1a'}`  | Extending style of the input box incase the floating value is negative
decimal | *number* | `2` | Number of digits to show after the decimal point
commaFormatted | *boolean*  | `true`  | Should the value be formatted with commas
onChange | *function* | `undefined`  | (event: object) - Handling the event when the value of input box changes
value | *any* | `undefined`  | Sets the value of the input box
defaultValue | *any* | `undefined`  | Sets the default value of the input box at the time of initial rendering, doesnt have effect if used along with `value` prop. Use either one of them or none

### Test

```
npm install
npm start
open http://localhost:1401
```

Now edit `test/App.js`.  

### Dependencies

(In case experimentation is desired)
* React
* Webpack
* [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
* [babel-loader](https://github.com/babel/babel-loader)
* [react-hot-loader](https://github.com/gaearon/react-hot-loader)

---
_Source: https://npm.io/package/cm-apt-numeric-text-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._