{"library":"react-number-format","title":"React Number Format","description":"react-number-format is a React component library designed for formatting numeric and pattern-based input fields, as well as displaying formatted text. It provides functionalities for adding prefixes, suffixes, and thousands separators, alongside comprehensive input masking capabilities for various patterns like credit card numbers or phone numbers. The library is currently stable at version 5.4.5 and is actively maintained with frequent bug fix releases, supporting a wide range of React versions up to 19. Its key differentiators include a sophisticated caret engine that handles complex formatting scenarios, custom pattern formatting, and the ability to define custom formatting handlers, offering a high degree of customization for user input experiences. The project emphasizes robust handling of user input while ensuring display consistency.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-number-format"],"cli":null},"imports":["import { NumericFormat } from 'react-number-format';","import { PatternFormat } from 'react-number-format';","import { NumberFormatBase } from 'react-number-format';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport { NumericFormat, PatternFormat } from 'react-number-format';\n\nfunction MyFormattedInputs() {\n  const [numericValue, setNumericValue] = useState('');\n  const [phoneValue, setPhoneValue] = useState('');\n\n  return (\n    <div>\n      <h2>Numeric Input (Currency)</h2>\n      <NumericFormat\n        value={numericValue}\n        onValueChange={(values) => {\n          setNumericValue(values.value);\n        }}\n        thousandSeparator={true}\n        prefix={'$'}\n        decimalScale={2}\n        fixedDecimalScale\n        placeholder=\"Enter amount\"\n      />\n\n      <h2>Phone Number Input</h2>\n      <PatternFormat\n        value={phoneValue}\n        onValueChange={(values) => {\n          setPhoneValue(values.value);\n        }}\n        format=\"(###) ###-####\"\n        mask=\"_\"\n        placeholder=\"(123) 456-7890\"\n      />\n\n      <p>Current Numeric Value: {numericValue}</p>\n      <p>Current Phone Value: {phoneValue}</p>\n    </div>\n  );\n}\n\nexport default MyFormattedInputs;","lang":"typescript","description":"This quickstart demonstrates how to use `NumericFormat` for currency input with thousands separators and decimal precision, and `PatternFormat` for a phone number mask, showing how to manage their values with React state.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}