### Installation

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Instructions for installing the @react-input/number-format package using npm, yarn, or CDN.

```bash
npm i @react-input/number-format
```

```bash
yarn add @react-input/number-format
```

--------------------------------

### generatePattern Usage Examples

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to use the `generatePattern` function with different modes ('full', 'full-inexact', 'partial', 'partial-inexact') and provides examples of testing the generated patterns against string values.

```typescript
const options = {
  mask: '###',
  replacement: { '#': /\D/ },
};

const pattern$1 = generatePattern('full', options);
RegExp(pattern$1).test('ab#'); // false
RegExp(pattern$1).test('abc'); // true

const pattern$2 = generatePattern('full-inexact', options);
RegExp(pattern$2).test('ab#'); // true
RegExp(pattern$2).test('abc'); // true

const pattern$3 = generatePattern('partial', options);
RegExp(pattern$3).test('a#'); // false
RegExp(pattern$3).test('ab'); // true

const pattern$4 = generatePattern('partial-inexact', options);
RegExp(pattern$4).test('a#'); // true
RegExp(pattern$4).test('ab'); // true
```

--------------------------------

### CDN Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Example of how to include the library via a CDN link for direct use in HTML.

```html
<script src="https://unpkg.com/@react-input/number-format/cdn"></script>
```

--------------------------------

### Install @react-input/mask with npm

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

This code snippet shows how to install the @react-input/mask package using npm, the Node Package Manager.

```bash
npm i @react-input/mask
```

--------------------------------

### Install @react-input/mask with yarn

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

This code snippet demonstrates how to add the @react-input/mask package to your project using yarn.

```bash
yarn add @react-input/mask
```

--------------------------------

### Localized Number Formatting Examples

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Illustrates various localized number formats using the `InputNumberFormat` component. This includes examples for Indian, Indonesian, Chinese, Arabic, German, and Portuguese locales, demonstrating different grouping separators, decimal separators, and digit systems.

```tsx
import { InputNumberFormat } from '@react-input/number-format';

// Entering 123456.789 will print:

export default function App() {
  return (
    <>
      {/* India uses thousands/lakh/crore separators */}
      <InputNumberFormat
        locales="en-IN"
        onChange={(event) => console.log(event.target.value)} // "1,23,456.789"
      />
      {/* When requesting a language that may not be supported, such as Balinese, include a fallback language, in this case Indonesian */}
      <InputNumberFormat
        locales={['ban', 'id']}
        onChange={(event) => console.log(event.target.value)} // "123.456,789"
      />
      {/* He nu extension key requests a numbering system, e.g. Chinese decimal */}
      <InputNumberFormat
        locales="zh-Hans-CN-u-nu-hanidec"
        onChange={(event) => console.log(event.target.value)} // "一二三,四五六.七八九"
      />
      {/* Arabic in most Arabic speaking countries uses real Arabic digits */}
      <InputNumberFormat
        locales="ar-EG"
        onChange={(event) => console.log(event.target.value)} // "١٢٣٤٥٦٫٧٨٩"
      />
      {/* German uses comma as decimal separator and period for thousands */}
      <InputNumberFormat
        locales="de-DE"
        format="currency"
        currency="EUR"
        onChange={(event) => console.log(event.target.value)} // "123.456,78 €"
      />
      {/* Formatting with units */}
      <InputNumberFormat
        locales="pt-PT"
        format="unit"
        unit="kilometer-per-hour"
        onChange={(event) => console.log(event.target.value)} // "123 456,789 km/h"
      />
    </>
  );
}
```

--------------------------------

### Basic Uncontrolled Input

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows a basic example of using the `InputNumberFormat` component for an uncontrolled input. The input value will be formatted automatically upon initialization.

```tsx
import { InputNumberFormat } from '@react-input/number-format';

export default function App() {
  // Entering 3500 will print '3,500' to the console if in US English locale
  return <InputNumberFormat onChange={(event) => console.log(event.target.value)} />;
}
```

--------------------------------

### Example: Auto-substitute Country Code

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to use the track function to automatically prepend a country code ('1') to a phone number input if it's not already present. It handles both insertion and deletion events to maintain the correct format.

```tsx
import { InputMask, type Track } from '@react-input/mask';

export default function App() {
  const track: Track = ({ inputType, value, data, selectionStart, selectionEnd }) => {
    if (inputType === 'insert' && !/^\D*1/.test(data) && selectionStart <= 1) {
      return `1${data}`;
    }

    if (inputType !== 'insert' && selectionStart <= 1 && selectionEnd < value.length) {
      if (selectionEnd > 2) {
        return '1';
      }
      if (selectionEnd === 2) {
        return false;
      }
    }

    return data;
  };

  return <InputMask mask="+_ (___)-___-__-__" replacement={{ _: /\d/ }} track={track} />;
}
```

--------------------------------

### Core Package Overview

Source: https://github.com/goncharukorg/react-input/blob/main/packages/core/README.md

Provides foundational elements for the @react-input scope, enabling specialized input handling packages like mask and number formatting.

```APIDOC
Project: /goncharukorg/react-input

Core Package:
  Name: @react-input/core
  Description: A foundational package for the @react-input scope, used by other specialized input packages.

Related Packages:
  - @react-input/mask: Applies masks to input using components or hooks.
  - @react-input/number-format: Provides locale-specific number, currency, and percentage formatting for input.

Feedback & Support:
  - Bugs/Suggestions: Open issues on GitHub or email goncharuk.bro@gmail.com.
  - Project Support: Star on GitHub, donate via Open Collective.

License:
  - Type: MIT
  - Copyright: © Nikolay Goncharuk
```

--------------------------------

### Mask Instance Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates creating a Mask instance and using its `unformat` method. This is useful when working with CDN or when you need to instantiate the Mask class directly.

```js
const mask = new ReactInput.Mask({
  mask: '+__',
  replacement: { _: /\d/ },
});

mask.unformat('+1_'); // returns: "1"
```

--------------------------------

### Initializing Input Value with format Utility

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to initialize an input's value correctly when using masks, by employing the `format` utility to ensure the initial value matches the masked format. This supports controlled input behavior.

```tsx
import { useMask, format } from '@react-input/mask';

const options = {
  mask: '+0 (___) ___-__-__',
  replacement: { _: /\d/ },
};

export default function App() {
  const inputRef = useMask(options);
  const defaultValue = format('1234567890', options);

  return <input ref={inputRef} defaultValue={defaultValue} />;
}
```

--------------------------------

### Number Formatting Utility - Instance Method

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates using the `NumberFormat` utility class to format numbers. An instance of the class is created with specific locale and formatting options, and then the `unformat` method is used.

```ts
const numberFormat = new ReactInput.NumberFormat({
  locales: 'en-IN',
  format: 'currency',
  currency: 'USD',
});

numberFormat.unformat('$1,23,456.78'); // returns: "123456.78"
```

--------------------------------

### Include @react-input/mask via CDN

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

This HTML snippet shows how to include the @react-input/mask library directly in your HTML file using a CDN link from UNPKG.

```html
<script src="https://unpkg.com/@react-input/mask/cdn"></script>
```

--------------------------------

### useNumberFormat Hook Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Illustrates the usage of the useNumberFormat hook from the @react-input/number-format package, showing how to attach it to an input element via a ref for number formatting.

```tsx
import { useNumberFormat } from '@react-input/number-format';

export default function App() {
  const inputRef = useNumberFormat({
    locales: 'en',
    maximumFractionDigits: 2,
  });

  return <input ref={inputRef} />;
}
```

--------------------------------

### Controlled Input Initialization

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates how to initialize a controlled input with a formatted default value using the `format` utility. This ensures the state value matches the formatted input value.

```tsx
import { useState } from 'react';
import { useNumberFormat, format } from '@react-input/number-format';

const options = {
  locales: 'en',
  maximumFractionDigits: 2,
};

export default function App() {
  const inputRef = useNumberFormat(options);
  const defaultValue = format(123456789, options);

  const [value, setValue] = useState(defaultValue); // `defaultValue` or '123,456,789'

  return <input ref={inputRef} value={value} onChange={(event) => setValue(event.target.value)} />;
}
```

--------------------------------

### TypeScript Usage with InputMask (Default Input)

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Illustrates the basic TypeScript usage of the InputMask component when it renders a native input element. It shows how to import types and use the component with default props.

```tsx
import { InputMask, type InputMaskProps, type MaskOptions } from '@react-input/mask';

export default function App() {
  // Here, since no `component` property was passed,
  // `InputMask` returns an `input` element and takes the type:
  // `MaskOptions & React.InputHTMLAttributes<HTMLInputElement>` (the same as `InputMaskProps`)
  return <InputMask mask="___-___' replacement="_" />;
}
```

--------------------------------

### generatePattern Utility API Update

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

The generatePattern utility has updated its API. Users should migrate from the old signature `generatePattern(options, true)` to `generatePattern('full', options)` and from `generatePattern(options)` to `generatePattern('full-inexact', options)`. This change affects how patterns are generated.

```javascript
// Old usage:
// generatePattern(options, true);
// generatePattern(options);

// New usage:
generatePattern('full', options);
generatePattern('full-inexact', options);
```

--------------------------------

### Number Formatting Utility - Standalone Function

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows how to use the standalone `format` utility function for number formatting. It takes the value to format and an options object, returning the formatted string.

```ts
format(123456.78, { locales: 'en-IN', format: 'currency', currency: 'USD' });
// returns: "$1,23,456.78"
```

--------------------------------

### Integrate with Material UI (InputComponent)

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates integrating InputNumberFormat with Material UI's TextField by creating a wrapper component that forwards the ref to InputNumberFormat and passing it to the `inputComponent` prop.

```tsx
import { forwardRef } from 'react';

import { InputNumberFormat, type InputNumberFormatProps } from '@react-input/number-format';
import { TextField } from '@mui/material';

// Component with InputNumberFormat
const ForwardedInputNumberFormat = forwardRef<HTMLInputElement, InputNumberFormatProps>((props, forwardedRef) => {
  return <InputNumberFormat ref={forwardedRef} locales="en" maximumFractionDigits={2} {...props} />;
});

// Component with Material UI
export default function App() {
  return (
    <TextField
      InputProps={{
        inputComponent: ForwardedInputNumberFormat,
      }}
    />
  );
}
```

--------------------------------

### TypeScript Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Highlights that the `@react-input/number-format` package is written in TypeScript, providing full type support out of the box. Types can be imported from the package directly or from a dedicated types path.

```typescript
// Import types directly
import { InputNumberFormatProps } from '@react-input/number-format';

// Or import from types path
// import { InputNumberFormatProps } from '@react-input/number-format/types';
```

--------------------------------

### react-input Properties

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Defines the properties that can be used to customize input formatting in react-input. This includes locale settings, formatting styles (decimal, currency, percent, unit), and currency-specific options.

```APIDOC
component:
  Type: Component
  Description: Not used in the useNumberFormat hook. Serves to enable the use of custom components, for example, if you want to use your own styled component with the ability to format the value.

locales:
  Type: string | string[]
  Description: The locale is specified as a string, or an array of such strings in order of preference. By default, the locale set in the environment (browser) is used. For the general form and interpretation of the locales argument, see Locale identification and negotiation.

format:
  Type: "decimal" | "currency" | "percent" | "unit"
  Default: "decimal"
  Description: The formatting style to use.

currency:
  Type: string
  Description: The currency to use in currency formatting. Possible values are the ISO 4217 currency codes, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. If the format is "currency", the currency property must be provided.

currencyDisplay:
  Type: "symbol" | "narrowSymbol" | "code" | "name"
  Default: "symbol"
  Description: How to display the currency in currency formatting.
```

--------------------------------

### Migration from v1 to v2: onMask to onChange

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Illustrates the change from using the `onMask` event in v1 to using the `onChange` event in v2 for the `InputMask` component. It shows how to access event details like value, input, parts, pattern, and validity using React's native `onChange` and provided utilities.

```tsx
import { InputMask, unformat, formatToParts, generatePattern } from '@react-input/mask';

// ...

const options = {
  mask: '___-___',
  replacement: { '_': /\d/ },
};

return (
  <InputMask
    {...options}
    onChange={(event) => {
      const value = event.target.value;
      const input = unformat(value, options);
      const parts = formatToParts(value, options);
      const pattern = generatePattern('full-inexact', options);
      const isValid = RegExp(pattern).test(value);
    }}
  />
);
```

--------------------------------

### CDN Usage with ReactInput.NumberFormat

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows how to use the ReactInput.NumberFormat class loaded via CDN to register and unregister number formatting on HTML input elements.

```js
const numberFormat = new ReactInput.NumberFormat({
  locales: 'en',
  maximumFractionDigits: 2,
});

const elements = document.getElementsByName('amount');

elements.forEach((element) => {
  numberFormat.register(element);
});

// If necessary, you can turn off formatting while typing.
// elements.forEach((element) => {
//   numberFormat.unregister(element);
// });
```

--------------------------------

### InputNumberFormat with Custom Component Integration

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows how to integrate a custom component with InputNumberFormat by passing the `component` prop. This allows InputNumberFormat to manage formatting while using the custom component's structure and props.

```tsx
import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatOptions } from '@react-input/number-format';

import { CustomInput, type CustomInputProps } from './CustomInput';

export default function App() {
  // Here, since the `component` property was passed,
  // `InputNumberFormat` returns the CustomInput component and takes the type:
  // `NumberFormatOptions & { locales?: Intl.LocalesArgument } & CustomInputProps` (the same as `InputNumberFormatProps<typeof CustomInput>`)
  return <InputNumberFormat component={CustomInput} />;
}
```

--------------------------------

### TypeScript Usage with InputMask (Custom Component)

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates integrating InputMask with a custom component in TypeScript. It highlights how to pass the custom component and its props, ensuring type safety.

```tsx
import { InputMask, type InputMaskProps, type MaskOptions } from '@react-input/mask';

import { CustomInput, type CustomInputProps } from './CustomInput';

export default function App() {
  // Here, since the `component` property was passed,
  // `InputMask` returns the `CustomInput` component and takes the type:
  // `MaskOptions & CustomInputProps` (the same as `InputMaskProps<typeof CustomInput>`)
  return <InputMask component={CustomInput} mask="___-___' replacement="_" />;
}
```

--------------------------------

### Custom Component Integration with InputMask

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to integrate the InputMask component with a custom React input component using forwardRef. This allows for custom styling and functionality while leveraging InputMask's masking capabilities.

```tsx
import {
  forwardRef
} from 'react';

import {
  InputMask
} from '@react-input/mask';

interface CustomInputProps {
  label: string;
}

// Custom input component
const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(({ label }, forwardedRef) => {
  return (
    <>
      <label htmlFor="custom-input">{label}</label>
      <input ref={forwardedRef} id="custom-input" />
    </>
  );
});

// Component with InputMask
export default function App() {
  return <InputMask component={CustomInput} mask="___-__-" replacement="_" label="Label for custom component" />;
}
```

--------------------------------

### CDN Usage with ReactInput.Mask

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Illustrates using the library via CDN by creating a global ReactInput.Mask class. This class can register and unregister masking on specified input elements.

```js
const mask = new ReactInput.Mask({
  mask: '+0 (___) ___-__-__',
  replacement: { _: /\d/ },
});

const elements = document.getElementsByName('phone');

elements.forEach((element) => {
  mask.register(element);
});

// If necessary, you can disable masking as you type.
// elements.forEach((element) => {
//   mask.unregister(element);
// });
```

--------------------------------

### InputNumberFormat Component Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates how to use the InputNumberFormat component from the @react-input/number-format package to format numbers with specified locales and maximum fraction digits.

```tsx
import { InputNumberFormat } from '@react-input/number-format';

export default function App() {
  return <InputNumberFormat locales="en" maximumFractionDigits={2} />;
}
```

--------------------------------

### Number Formatting Options

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Defines the various options available for customizing number formatting within the react-input component. These options control how units, signs, grouping separators, and decimal places are displayed.

```APIDOC
unit:
  type: string
  description: The unit to use in `unit` formatting. Possible values are core unit identifiers, defined in [UTS #35, Part 2, Section 6](https://unicode.org/reports/tr35/tr35-general.html#Unit_Elements). Pairs of simple units can be concatenated with `"-per-"` to make a compound unit. If the `format` is `"unit"`, the `unit` property must be provided.

unitDisplay:
  type: "short" | "long" | "narrow"
  default: "short"
  description: The unit formatting style to use in `unit` formatting.

signDisplay:
  type: "auto" | "never" | "always" | "exceptZero"
  default: "auto"
  description: When to display the sign for the number.

groupDisplay:
  type: "auto" | boolean
  default: "auto"
  description: Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.

minimumIntegerDigits:
  type: number
  default: 1
  description: The minimum number of integer digits to use. A value with a smaller number of integer digits than this number will be left-padded with zeros (to the specified length) when formatted.

maximumIntegerDigits:
  type: number
  description: The maximum number of integer digits to use.

minimumFractionDigits:
  type: number
  description: The minimum number of fraction digits to use. The default for plain number and percent formatting is `0`. The default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code list](https://www.six-group.com/dam/download/financial-information/data-center/iso-currrency/lists/list-one.xml) (`2` if the list doesn't provide that information).
```

--------------------------------

### Migration: Using onChange instead of onNumberFormat

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Illustrates the recommended approach for handling input changes in version 2 of `@react-input/number-format`. It shows how to replace the deprecated `onNumberFormat` event with React's native `onChange` event and utilize the `unformat` utility for value processing.

```tsx
import { InputNumberFormat, unformat } from '@react-input/number-format';

// ...

const locales = 'en';

return (
  <InputNumberFormat
    locales={locales}
    onChange={(event) => {
      const value = event.target.value;
      const number = Number(unformat(value, locales));
    }}
  />
);
```

--------------------------------

### useMask Hook Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Shows how to implement input masking using the useMask hook in React. The hook is attached to an input element via its ref, and accepts the same mask and replacement options.

```tsx
import { useMask } from '@react-input/mask';

export default function App() {
  const inputRef = useMask({
    mask: '+0 (___) ___-__-__',
    replacement: { _: /\d/ },
  });

  return <input ref={inputRef} />;
}
```

--------------------------------

### Integrate with Custom Components

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows how to use InputNumberFormat with a custom React component by leveraging `forwardRef`. The custom component receives the `ref` and can be passed to the `component` prop of InputNumberFormat.

```tsx
import { forwardRef } from 'react';

import { InputNumberFormat } from '@react-input/number-format';

interface CustomInputProps {
  label: string;
}

// Custom input component
const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>(({ label }, forwardedRef) => {
  return (
    <>
      <label htmlFor="custom-input">{label}</label>
      <input ref={forwardedRef} id="custom-input" />
    </>
  );
});

// Component with InputNumberFormat
export default function App() {
  return <InputNumberFormat component={CustomInput} label="Label for custom component" />;
}
```

--------------------------------

### Integrate with Material UI (useNumberFormat hook)

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Shows an alternative integration with Material UI's TextField using the `useNumberFormat` hook. The hook returns a ref that can be directly passed to the `inputRef` prop of the TextField.

```tsx
import { useNumberFormat } from '@react-input/number-format';
import { TextField } from '@mui/material';

export default function App() {
  const inputRef = useNumberFormat({ locales: 'en', maximumFractionDigits: 2 });

  return <TextField inputRef={inputRef} />;
}
```

--------------------------------

### Format Utility

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Masks a value using the specified mask and replacement rules. It takes the unmasked value and a configuration object containing the mask and replacement patterns. The output matches what would be seen in an input field.

```ts
format('1', { mask: '+__', replacement: { _: /\d/ } });
// returns: "+1"
```

--------------------------------

### InputNumberFormat with Default Input Element

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates using the InputNumberFormat component as a default input element. It automatically supports standard input attributes and number formatting options.

```tsx
import { InputNumberFormat, type InputNumberFormatProps, type NumberFormatOptions } from '@react-input/number-format';

export default function App() {
  // Here, since no `component` property was passed,
  // `InputNumberFormat` returns an `input` element and takes the type:
  // `NumberFormatOptions & { locales?: Intl.LocalesArgument } & React.InputHTMLAttributes<HTMLInputElement>` (the same as `InputNumberFormatProps`)
  return <InputNumberFormat />;
}
```

--------------------------------

### Material UI Integration with InputMask

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to integrate the InputMask component with Material UI's TextField using forwardRef. This allows the InputMask to receive the ref forwarded from the Material UI component.

```tsx
import { forwardRef } from 'react';

import { InputMask, type InputMaskProps } from '@react-input/mask';
import { TextField } from '@mui/material';

// Component with InputMask
const ForwardedInputMask = forwardRef<HTMLInputElement, InputMaskProps>((props, forwardedRef) => {
  return <InputMask ref={forwardedRef} mask="___-___' replacement="_" {...props} />;
});

// Component with Material UI
export default function App() {
  return (
    <TextField
      InputProps={{
        inputComponent: ForwardedInputMask,
      }}
    />
  );
}
```

--------------------------------

### Material UI Integration with useMask Hook

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Shows how to integrate the useMask hook from react-input-mask with Material UI's TextField. This approach uses the hook to manage the mask and attach it to the input element.

```tsx
import { useMask } from '@react-input/mask';
import { TextField } from '@mui/material';

export default function App() {
  const inputRef = useMask({ mask: '___-___' replacement: '_' });

  return <TextField inputRef={inputRef} />;
}
```

--------------------------------

### FormatToParts Utility

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Splits a masked value into an array of parts, each indicating the character type (mask, input, or replacement). This is useful for fine-grained manipulation of masked string components.

```ts
formatToParts('1', { mask: '+__', replacement: { _: /\d/ } });
// returns: [
//   { index: 0, value: '+', type: 'mask' },
//   { index: 1, value: '1', type: 'input' },
//   { index: 2, value: '_', type: 'replacement' },
// ]
```

--------------------------------

### React Input Component Properties

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Details the unique properties for the react-input component, such as mask, replacement, showMask, separate, track, and modify. These properties control input masking, character replacement, display logic, and custom behavior.

```APIDOC
ReactInputComponent:
  Properties:
    component: Component
      Description: Not used in the useMask hook. Serves to enable the use of custom components.
    mask: string
      Description: Input mask, replacement is used to replace characters.
      Default: ""
    replacement: string | object
      Description: Sets the characters replaced in the mask. Keys are ignored as you type.
      Default: {}
    showMask: boolean
      Description: Controls the display of the mask.
      Default: false
    separate: boolean
      Description: Stores the position of the entered characters.
      Default: false
    track: function
      Description: The track function is run before masking, allowing the entered value to be conditionally changed.
    modify: function
      Description: Function triggered before masking. Allows you conditionally change the properties of the component that affect masking.
```

--------------------------------

### InputMask Component Usage

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to use the InputMask component for phone number masking in a React application. It takes a mask string and a replacement object for character mapping.

```tsx
import { InputMask } from '@react-input/mask';

export default function App() {
  return <InputMask mask="+0 (___) ___-__-__" replacement={{ _: /\d/ }} />;
}
```

--------------------------------

### Unformat Value with Locale

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Demonstrates how to use the `unformat` function to convert a formatted string value into its numeric string equivalent using a specified locale. This is crucial for correctly parsing numbers with different decimal separators and grouping symbols.

```typescript
unformat('$1,23,456.78', 'en-IN');
// returns: "123456.78"
```

--------------------------------

### Typing InputNumberFormat with Custom Component Props

Source: https://github.com/goncharukorg/react-input/blob/main/packages/number-format/README.md

Addresses TypeScript type inference issues when passing rest parameters to InputNumberFormat with a custom component. Explicitly passing the component's type ensures correct prop handling.

```tsx
import { InputNumberFormat } from '@react-input/number-format';

import { CustomInput } from './CustomInput';

export default function Component(props: any) {
  return <InputNumberFormat<typeof CustomInput> component={CustomInput} {...props} />;
}
```

--------------------------------

### Track Function API Documentation

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Defines the parameters and return values for the track function, which intercepts input events in react-input. It allows for conditional modification of input values, handling different input types and cursor positions.

```APIDOC
track(params: {
  inputType: 'insert' | 'deleteBackward' | 'deleteForward';
  value: string;
  data: string | null;
  selectionStart: number;
  selectionEnd: number;
}): string | false | null | undefined;

Parameters:
  inputType: Type of input event ('insert', 'deleteBackward', 'deleteForward').
  value: The input value before the modification.
  data: The characters being inserted, or null if deleting.
  selectionStart: The start index of the selection or insertion point.
  selectionEnd: The end index of the selection or insertion point.

Returns:
  string: The new value for the input.
  false: Stops the input process, preventing value and cursor changes.
  null: Returns an empty string.
  true | undefined: Does not change the input value.
```

--------------------------------

### TypeScript Usage with InputMask (Generic Component Type)

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Explains how to correctly type the InputMask component when integrating with a custom component, especially when dealing with rest parameters. It shows passing the component's type explicitly to InputMask.

```tsx
import { InputMask } from '@react-input/mask';

import { CustomInput } from './CustomInput';

export default function Component(props: any) {
  return <InputMask<typeof CustomInput> component={CustomInput} mask="___-___' replacement="_" {...props} />;
}
```

--------------------------------

### Unformat Utility

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Unmasks a value, returning only the characters entered by the user according to the specified mask and replacement rules. It effectively reverses the `format` utility, removing mask characters and non-matching replacements.

```ts
unformat('+1_', { mask: '+__', replacement: { _: /\d/ } });
// returns: "1"
```

--------------------------------

### TrackParam Renamed to TrackingData

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

The type `TrackParam` has been renamed to `TrackingData`. This is a breaking change for projects relying on the previous type name.

```typescript
// Before:
type TrackParam = {
  // ... properties
};

// After:
type TrackingData = {
  // ... properties
};
```

--------------------------------

### InputMask with Custom Replacement

Source: https://github.com/goncharukorg/react-input/blob/main/packages/mask/README.md

Demonstrates how to use the 'replacement' property to define custom regular expressions for mask characters 'd', 'm', and 'y'. This allows specific character types to be enforced for each position in the 'dd.mm.yyyy' mask.

```tsx
import { InputMask } from '@react-input/mask';

export default function App() {
  return <InputMask mask="dd.mm.yyyy" replacement={{ d: /\d/, m: /\d/, y: /\d/ }} showMask separate />;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.