react-formatted-input

$3

Describe the component here

$3

``
npm install @opuscapita/react-formatted-input
`

$3

View the DEMO

$3

View the Change log

$3

View the Migrate guide between major versions

$3

#### UMD
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
#### CommonJS/ES Module
You need to configure your module loader to use cjs or es fields of the package.json to use these module types.
Also you need to configure sass loader, since all the styles are in sass format.
* With webpack use resolve.mainFields to configure the module type.
* Add SASS loader to support importing of SASS styles.

$3

| Prop name | Type | Default | Description |
| ------------- | ------------ | ------------- | --------------------------------------------------------- |
| onChange | func | Required | Called upon change |
| onBlur | func | Noop function | Called upon blur |
| onMouseDown | func | Noop function | Called upon mouse down |
| formatter | func | Noop function | Function that formats the value on blur |
| editFormatter | func | Noop function | Function that formats the value on change |
| inputProps | object | | Collection of props that are be passed to the input field |
| value | text, number | | Input value |

$3

| Prop name | Type | Default | Description |
| ------------------ | ------ | ------------- | ----------------------------------------------- |
| onChange | func | Required | Called upon change |
| onBlur | func | Noop function | Called upon blur |
| currency | string | undefined | Currency code to get number of decimals from |
| decimals | string | undefined | Number of decimals, overrides currency decimals |
| thousandSeparator | string | undefined | Thousand separator |
| decimalSeparator | string | "." | Decimal separator |
| selectValueOnClick | bool | false | If true, input value is selected on click |

$3

`jsx
import React from 'react';
import FormattedInput, { FormatInputCurrency } from '@opuscapita/react-formatted-input';

export default class ReactView extends React.Component {
formatter = (value) => formatted-${value};

render() {
return (

onChange="..."
formatter={this.formatter}
/>
currency="EUR"
onChange="..."
/>

);
}
}
``