rifm

library0.12.1jsnpmunverified

RIFM (React Input Format & Mask) is a tiny (~800 bytes, gzipped) library that provides both a component and a hook to transform any input component into a formatted or masked input. Current stable version is 0.12.1. It requires React 16.8+, has zero dependencies, and ships with TypeScript definitions. Unlike larger alternatives like react-number-format or react-input-mask, RIFM is minimal and focused on cursor-position preservation after formatting. It supports any input component (e.g., Material-UI, custom) and can handle number formatting, date masking, and case enforcement. Release cadence is low; updates are infrequent but stable.

devops

npm install rifm

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · RIFM

rifm

devopsjavascriptv0.12.1

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.

Rifm

✓ import { Rifm } from 'rifm'

✗ import Rifm from 'rifm'

Rifm is a named export, not default. Always use named import.

useRifm

✓ import { useRifm } from 'rifm'

✗ const { useRifm } = require('rifm')

useRifm is a named export. In CommonJS, use require('rifm').useRifm. The library is ESM-first but supports CJS with named exports.

RifmProps

✓ import type { RifmProps } from 'rifm'

✗ import { RifmProps } from 'rifm'

RifmProps is a type export only available with TypeScript 3.8+ using type imports. Do not use as value import.

Demonstrates using the useRifm hook with a number formatter that adds locale thousands separators.

import React from 'react'; import { useRifm } from 'rifm'; function NumberInput() { const [value, setValue] = React.useState(''); const format = (str: string) => { const num = parseInt(str.replace(/[^\d]+/g, ''), 10); return isNaN(num) ? '' : num.toLocaleString('en'); }; const accept = /\d/g; const rifm = useRifm({ value, onChange: setValue, format, accept }); return <input type="tel" value={rifm.value} onChange={rifm.onChange} />; }

Debug

Known issues

breakingBefore v0.12.0, the 'accept' prop default was /\d/g (only digits). In v0.12.0, the default was changed to accept all characters (no filter).

fix

If you rely on the old behavior (only digits accepted), pass accept=/\d/g explicitly.

affects: >=0.12.0

deprecatedThe 'replace' prop was deprecated in v0.12.0 and removed in v0.12.1. Use the 'format' prop with your own postprocessing instead.

fix

Migrate to using 'format' function that returns the formatted string directly.

affects: >=0.12.0 <0.12.1

breakingIn v0.12.0, the internal cursor manipulation behavior was changed. Some formats that relied on the old cursor logic may break.

fix

Test your format functions thoroughly. Ensure the format function preserves 'accepted' character order as per the documentation.

affects: >=0.12.0

gotchaThe 'format' function is called for every keystroke. Performance is critical; avoid heavy computations inside it.

fix

Keep format functions simple and memoize if needed with React.useCallback.

affects: >=0.10.0

Errors

Common errors & fixes

TypeError: Cannot destructure property 'value' of 'Object(...)' is not a function

Using useRifm without React 16.8+ (hooks not available) or incorrect import

fix

Ensure React >=16.8 is installed and use named import: import { useRifm } from 'rifm'

Module not found: Can't resolve 'rifm'

Package not installed or import path incorrect

fix

Run: npm install rifm or yarn add rifm. Then import correctly: import { Rifm } from 'rifm'

'Rifm' is not exported from 'rifm' (or similar)

Using default import instead of named import

fix

Change import to: import { Rifm } from 'rifm'

Upgrade

Version history

0.12.1latest on npm

Audit

Dependencies

reactrequiredpeer dependency, requires >=16.8 for hooks

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/istarkov/rifm ↗

packagerifm ↗

homepagehttps://github.com/istarkov/rifm ↗