Registry / testing / react-input-formatter

react-input-formatter

library1.2.8jsnpmunverified

A lightweight React component for formatting input fields based on a template pattern (e.g., phone numbers, postal codes, credit card numbers). Version 1.2.8, actively maintained. Provides mask-like formatting with alphanumeric (`#`), numeric (`9`), and special character (`@`) placeholders. Uses browser-only DOM APIs, so it requires a Client Component in Next.js App Router. Ships TypeScript definitions.

testing

npm install react-input-formatter

package ↗

INSTALL

IMPORT

SIG · REACT-INPUT-FORMAT

react-input-formatter

testingjavascriptv1.2.8

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

FormattedInput

✓ import { FormattedInput } from 'react-input-formatter'

✗ import FormattedInput from 'react-input-formatter'

Named export only; default import is not supported.

Example of using FormattedInput with a template that formats alphanumeric input as '###-###'.

"use client"; import React from 'react'; import { FormattedInput } from 'react-input-formatter'; export default function App() { return ( <form> <FormattedInput name="postalCode" id="postalCode-id" placeholderText="Enter postal code" formatTemplate="###-###" defaultValue="A1B2C3" /> </form> ); }

Debug

Known issues

breakingComponent uses browser-only DOM APIs (selectionStart, setSelectionRange) which are unavailable during SSR.

fix

Wrap the component in a Client Component by adding 'use client' directive in Next.js App Router.

affects: >=1.0.0

deprecatedImport path used in README example is incorrect: 'react-formatted-input' should be 'react-input-formatter'.

fix

Use correct package name: import { FormattedInput } from 'react-input-formatter'

affects: >=1.0.0

gotchaThe formatTemplate uses '#' for any alphanumeric character, '9' for numeric only, and '@' for special characters. Misunderstanding these placeholders leads to unexpected validation.

fix

Refer to documentation: # = alphanumeric, 9 = numeric only, @ = special character.

affects: >=1.0.0

gotchaThe defaultValue prop is required; omitting it may cause uncontrolled/controlled component mismatch warnings.

fix

Always provide a defaultValue string, even if empty.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'selectionStart')

Component rendered on server side where DOM APIs are not available.

fix

Ensure component is only used in a Client Component with 'use client' directive.

Module not found: Can't resolve 'react-formatted-input'

Import path typo in README example leads developers to import 'react-formatted-input' instead of 'react-input-formatter'.

fix

Use correct package name: import { FormattedInput } from 'react-input-formatter'

Upgrade

Version history

1.2.8latest on npm

Audit

Dependencies

reactrequiredPeer dependency: requires React 18 or higher

react-domrequiredPeer dependency: requires react-dom ^19.2.0

Agent activity

8 hits · last 30 days

node

Resources

packagereact-input-formatter ↗