{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-currency-input-field"],"cli":null},"imports":["import CurrencyInput from 'react-currency-input-field';","import type { CurrencyInputProps } from 'react-currency-input-field';","const { default: CurrencyInput } = require('react-currency-input-field');"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}