Skip to content

alom2/react-input-currency

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react-input-currency

NPM JavaScript Style Guide

Install

npm install --save react-input-currency

Usage

import React, { Component } from 'react'

import InputCurrency from 'react-input-currency'

class Example extends Component {
  constructor() {
    super();
    this.state = {
      value: '20',
    }
  }
  render () {
    return (
      <InputCurrency 
        value={this.state.value}
        onChange={({ value }) => this.setState({ value })}
      />
    );
  }
}

Styling

If you want the text aligned right:

.style {
	text-align: right;
}
...
<InputCurrency className={style} {...props}  />

Props

Parameter Type Description
value string/number Field value.
id string Field id.
name string Field name.
required boolean Html5 required
onChange function Callback function called when value changes, returns an object { name: props.name, value: masked input value }
className string Jsx className

Mask props

Parameter Default Type
decimal . string
prefix $ string
thousands , string
Example
const maskProps = {
	decimal: ',',
	prefix: 'R$',
	thousands: '.'
}

<InputCurrency {...maskProps}  />

Will give the mask R$ 2.500,00

License

MIT © alom2

About

A react input component with currency mask.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published