Registry / web-framework / react-currency-input-field

react-currency-input-field

library4.0.5jsnpmunverified

React Currency Input Field is a lightweight and feature-rich React component designed for formatting currency and numerical inputs within forms. Currently stable at version 4.0.5, it receives moderate updates, primarily focused on build stability and compatibility, as evidenced by recent patch releases. Key differentiators include support for numerical abbreviations (e.g., '1k'), customizable prefixes and suffixes, automatic group separators, and integration with the Internationalization API (Intl locale config) for region-specific formatting. It also provides keyboard stepping, allows/disallows decimals and negative values, and ships with full TypeScript support, all while maintaining zero runtime dependencies (beyond React itself) and a minimal bundle size.

web-framework

npm install react-currency-input-field

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-CURRENCY-INP

react-currency-input-field

web-frameworkjavascriptv4.0.5

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

CurrencyInput

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

✗ import { CurrencyInput } from 'react-currency-input-field'; const CurrencyInput = require('react-currency-input-field');

The primary component is a default export. Using named imports or CommonJS `require` (especially in newer Node.js environments) may lead to 'undefined' or resolution errors, particularly due to v4 ESM/CJS build fixes.

CurrencyInputProps

✓ import type { CurrencyInputProps } from 'react-currency-input-field';

For type checking the component's props in TypeScript projects. It's recommended to use `import type` to explicitly mark it as a type-only import.

All symbols (CommonJS)

✓ const { default: CurrencyInput } = require('react-currency-input-field');

✗ const CurrencyInput = require('react-currency-input-field');

Due to `react-currency-input-field` being primarily an ESM package with CJS compatibility, direct `require('pkg')` might return an object with a `default` property in CommonJS environments (especially Node.js v12+). Destructuring the `default` export is the safer CJS pattern.

This example demonstrates how to create a controlled currency input field using React's `useState` hook, setting an initial value, a prefix, and handling value changes.

import React, { useState } from 'react'; import CurrencyInput from 'react-currency-input-field'; const MyCurrencyForm = () => { const [value, setValue] = useState<string | undefined>('1234.56'); return ( <div> <label htmlFor="currency-input">Enter Amount:</label> <CurrencyInput id="currency-input" name="currency-field" placeholder="Please enter an amount" defaultValue={1234.56} decimalsLimit={2} prefix="$" onValueChange={(value, name, values) => { setValue(value); console.log(`Value: ${value}, Name: ${name}, Values:`, values); }} value={value} // Use value for controlled component behavior /> <p>Current Input: {value}</p> </div> ); }; export default MyCurrencyForm;

Debug

Known issues

breakingVersion 4.0.0 introduced a switch from Rollup to esbuild for the build process. While the public API remained largely consistent, this change can impact projects relying on specific module resolution behaviors or build configurations.

fix

Review your bundler configuration (e.g., Webpack, Rollup) for potential conflicts with esbuild's output. Ensure your project's module resolution settings are compatible with modern ESM/CJS outputs.

affects: >=4.0.0

gotchaBetween v4.0.0 and v4.0.3, there were known issues with Node.js ESM resolution in Server-Side Rendering (SSR) environments. This could lead to modules not being found or incorrectly resolved.

fix

Upgrade to `react-currency-input-field@4.0.3` or newer. This version specifically includes fixes to bundle ESM/CJS builds to address Node ESM resolution issues in SSR.

affects: >=4.0.0 <4.0.3

gotchaIncorrect usage of `defaultValue` and `value` props can lead to an input becoming either uncontrolled or a 'controlled component' error in React. `defaultValue` is for uncontrolled inputs, while `value` should be used with `onValueChange` for controlled inputs.

fix

For controlled components, always bind the `value` prop to state and update it via the `onValueChange` handler. For uncontrolled components, use `defaultValue` for initial state and avoid providing `value` prop unless explicitly making it controlled.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'default') or 'CurrencyInput is not a function'

Attempting to `require` the module in a CommonJS environment, but it's primarily an ESM package with the default export nested under a `default` property.

fix

When using CommonJS `require`, destructure the default export: `const { default: CurrencyInput } = require('react-currency-input-field');` or migrate to ES modules: `import CurrencyInput from 'react-currency-input-field';`

Module not found: Can't resolve 'react-currency-input-field'

The package is not correctly installed, or your build tool/bundler cannot locate the module.

fix

Ensure the package is installed: `npm install react-currency-input-field` or `yarn add react-currency-input-field`. Verify your bundler's module resolution paths and aliases. For SSR, ensure you are on `v4.0.3` or newer for better ESM/CJS compatibility.

Invariant Violation: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component.

Mixing `defaultValue` and `value` props, or conditionally rendering `value` such that it transitions from `undefined` to a defined state.

fix

Choose either `defaultValue` (uncontrolled) or `value` (controlled with `onValueChange`) for the entire lifecycle of the component. If `value` is used, ensure it is always defined or explicitly `null` if no value is present, rather than switching between `undefined` and defined.

Upgrade

Version history

4.0.5latest on npm

Audit

Dependencies

reactrequiredRequired React host environment for the component to function.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/cchanxzy/react-currency-input-field ↗

packagehttps://www.npmjs.com/package/react-currency-input-field ↗