React Currency Input

React Currency Input component.

Installation

yarn add @pismo/react-currency-input

Usage

import React, { Component } from 'react'
import CurrencyInput from '@pismo/react-currency-input'

class MyComponent extends Component {
  constructor(props) {
    super(props)
    this.state = { amount: 500 }
  }

  handleChange = (event, value, maskedValue) => {
    this.setState({ amount: value })
  }

  render() {
    const { amount } = this.state

    return (
      <CurrencyInput value={amount} onChange={this.handleChange} />
    )
  }
}

Props

  • currency: 3-character acronym for the desired currency.
    Defaults to BRL. (USD is also supported without passing any currencyConfiguration object).

  • currencyConfiguration: Check /src/constants/currencyConfigurations for the pre-defined ones.

  • showSymbol: Whether to show or hide the symbol (passed on currencyConfiguration) on masked values.
    Defaults to false.

  • spaceSymbol: Appends a space ' ' to the configured symbol. e.g.: "R$ 500,00" instead of "R$500,00".
    Defaults to false.

  • onChange: Callback that gets called whenever user changes input value.
    Arguments: event, value and maskedValue.

Development

This project uses parcel for zero-configuration bundling.

yarn global add parcel-bundler

Then it should just work! This will run a dev server for you, which will serve the generated /demo folder

yarn start

Generating the distribution files in /dist:

yarn build

GitHub