react-amount-field

React component for displaying input field transforming decimal value to cent value. It will by example transform 3.56 to 356.

Demo & Examples

Live demo: jtassin.github.io/react-amount-field

To build the examples locally, run:

npm install
npm start

Then open localhost:3000 in a browser.

Installation

The easiest way to use react-amount-field is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/ReactAmountField.min.js in your page. If you use this, make sure you have already included React, and it is available as a global variable. If you want to use the redux-form/material-ui connector, you also need to include material-ui in your dependencies.

npm install react-amount-field --save

or

yarn add react-amount-field

Usage

One installed, just require and use the component:

import React from `react`;
import ReactDOM from `react-dom`;
import AmountField from 'react-amount-field';

ReactDOM.render(<AmountField value="1337"><input type="text" /></AmountField>, document.querySelector('#main'));

Properties

| Props | Options | Default | Description | | ------------- |-------------| -----| -------- | | value | String/Number | null | The value of the field in cents |

Development (src, lib and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start.

License

MIT, see LICENSE for details.

Contributors

| ---| Julien TASSIN |

Copyright (c) 2016 Julien TASSIN.