React Currency Input Field

Common errors

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

  cause 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'

  cause 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.

  cause 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.

Warnings

• breaking Version 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.
• gotcha Between 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.
• gotcha Incorrect 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.

Install

• npm install react-currency-input-field npm
• yarn add react-currency-input-field yarn
• pnpm add react-currency-input-field pnpm

Imports

• CurrencyInput
  wrong:

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

  correct:

  import CurrencyInput from '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)
  wrong:

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

  correct:

  const { default: 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.

Quickstart

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;