{"id":11677,"library":"react-currency-input-field","title":"React Currency Input Field","description":"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.","status":"active","version":"4.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/cchanxzy/react-currency-input-field","tags":["javascript","react","component","currency","form","field","number","input","intl","typescript"],"install":[{"cmd":"npm install react-currency-input-field","lang":"bash","label":"npm"},{"cmd":"yarn add react-currency-input-field","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-currency-input-field","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required React host environment for the component to function.","package":"react","optional":false}],"imports":[{"note":"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.","wrong":"import { CurrencyInput } from 'react-currency-input-field';\nconst CurrencyInput = require('react-currency-input-field');","symbol":"CurrencyInput","correct":"import CurrencyInput from 'react-currency-input-field';"},{"note":"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.","symbol":"CurrencyInputProps","correct":"import type { CurrencyInputProps } from 'react-currency-input-field';"},{"note":"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.","wrong":"const CurrencyInput = require('react-currency-input-field');","symbol":"All symbols (CommonJS)","correct":"const { default: CurrencyInput } = require('react-currency-input-field');"}],"quickstart":{"code":"import React, { useState } from 'react';\nimport CurrencyInput from 'react-currency-input-field';\n\nconst MyCurrencyForm = () => {\n  const [value, setValue] = useState<string | undefined>('1234.56');\n\n  return (\n    <div>\n      <label htmlFor=\"currency-input\">Enter Amount:</label>\n      <CurrencyInput\n        id=\"currency-input\"\n        name=\"currency-field\"\n        placeholder=\"Please enter an amount\"\n        defaultValue={1234.56}\n        decimalsLimit={2}\n        prefix=\"$\"\n        onValueChange={(value, name, values) => {\n          setValue(value);\n          console.log(`Value: ${value}, Name: ${name}, Values:`, values);\n        }}\n        value={value} // Use value for controlled component behavior\n      />\n      <p>Current Input: {value}</p>\n    </div>\n  );\n};\n\nexport default MyCurrencyForm;","lang":"typescript","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=4.0.0 <4.0.3"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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';`","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.","error":"TypeError: Cannot read properties of undefined (reading 'default') or 'CurrencyInput is not a function'"},{"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.","cause":"The package is not correctly installed, or your build tool/bundler cannot locate the module.","error":"Module not found: Can't resolve 'react-currency-input-field'"},{"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.","cause":"Mixing `defaultValue` and `value` props, or conditionally rendering `value` such that it transitions from `undefined` to a defined state.","error":"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."}],"ecosystem":"npm"}