jtassin/react-amount-field

View on GitHub
README.md

Summary

Maintainability
Test Coverage
# react-amount-field
[![npm version](https://badge.fury.io/js/react-amount-field.svg)](https://badge.fury.io/js/react-amount-field)
[![Build Status](https://travis-ci.org/jtassin/react-amount-field.svg?branch=master)](https://travis-ci.org/jtassin/react-amount-field)
[![codecov](https://codecov.io/gh/jtassin/react-amount-field/branch/master/graph/badge.svg)](https://codecov.io/gh/jtassin/react-amount-field)
[![Code Climate](https://codeclimate.com/github/jtassin/react-amount-field/badges/gpa.svg)](https://codeclimate.com/github/jtassin/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](http://jtassin.github.io/react-amount-field/)
 
To build the examples locally, run:
 
```
npm install
npm start
```
 
Then open [`localhost:3000`](http://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](http://browserify.org), [Webpack](http://webpack.github.io/), 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.
 
```bash
npm install react-amount-field --save
```
 
or
 
```bash
yarn add react-amount-field
```
 
 
## Usage
 
One installed, just require and use the component:
```javascript
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](/LICENSE) for details.
 
## Contributors
 
[![Julien TASSIN](https://avatars0.githubusercontent.com/u/1771191?v=3&s=144)](https://github.com/roylee0704/) |
---|
[Julien TASSIN](https://github.com/jtassin) |
 
Copyright (c) 2016 Julien TASSIN.