react-currency-input-field

What is react-currency-input-field?

The react-currency-input-field package is a React component that provides an input field for currency values. It allows for easy formatting, parsing, and validation of currency inputs, making it ideal for financial applications.

What are react-currency-input-field's main functionalities?

Basic Currency Input

This feature allows you to create a basic currency input field with default value and decimal limit. The onValueChange callback provides the current value and name of the input field.

import CurrencyInput from 'react-currency-input-field';

function App() {
  return (
    <CurrencyInput
      id="input-example"
      name="input-name"
      placeholder="Please enter a number"
      defaultValue={1000}
      decimalsLimit={2}
      onValueChange={(value, name) => console.log(value, name)}
    />
  );
}

Custom Currency Symbol

This feature allows you to add a custom currency symbol (e.g., $) to the input field. The prefix prop is used to specify the currency symbol.

import CurrencyInput from 'react-currency-input-field';

function App() {
  return (
    <CurrencyInput
      id="input-example"
      name="input-name"
      placeholder="Please enter a number"
      defaultValue={1000}
      decimalsLimit={2}
      prefix="$"
      onValueChange={(value, name) => console.log(value, name)}
    />
  );
}

International Currency Formatting

This feature allows you to format the currency input according to international standards. The intlConfig prop is used to specify the locale and currency type.

import CurrencyInput from 'react-currency-input-field';

function App() {
  return (
    <CurrencyInput
      id="input-example"
      name="input-name"
      placeholder="Please enter a number"
      defaultValue={1000}
      decimalsLimit={2}
      intlConfig={{ locale: 'en-US', currency: 'USD' }}
      onValueChange={(value, name) => console.log(value, name)}
    />
  );
}

Other packages similar to react-currency-input-field

react-number-format

react-number-format is a versatile library for formatting numbers in React. It supports currency formatting, phone numbers, and custom formats. Compared to react-currency-input-field, it offers more general number formatting capabilities but may require more configuration for specific currency use cases.

react-currency-format

react-currency-format is a lightweight library specifically designed for currency formatting in React. It provides similar functionality to react-currency-input-field but with a simpler API. It is ideal for applications that need straightforward currency input without additional features.

README

React Currency Input Field Component

Features:

• Only allows numbers
• Can handle decimals
• Can add prefix eg. £ or $
• Automatically inserts commas
• Lightweight and simple
• Works well with Bootstrap styling

Demo

Install

npm install react-currency-input-field

or

yarn add react-currency-input-field

Usage

import CurrencyInput from 'react-currency-input-field'

<CurrencyInput
  id="input-example"
  name="input-name"
  placeholder="£1,000"
  defaultValue={1000}
  allowDecimals={true}
  decimalsLimit={2}
  onChange={(value, name) => {process(value, name)}}
/>

Have a look in src/examples for more examples on implementing.

Props

Name	Type	Default	Description
allowDecimals	boolean	true	Allow decimals
id	string		Component id
name	string		Component (input) name
className	string		Class names
decimalsLimit	number	2	Limit length of decimals allowed
defaultValue	number		Default value
disabled	boolean	false	Disabled
onChange	function		Handle change in value
placeholder	string		Placeholder if no input
prefix	string		Include a prefix eg. £ or $
maxLength	number		Maximum number of characters the user can enter

Issues

Feel free to message me if you have any questions

Changelog

0.8.3 (2020-05-06)

Bug Fixes

• improve props table in readme (#37) (737f8fd)