rifm

What is rifm?

The 'rifm' (React Input Format and Mask) package is a lightweight library for formatting and masking input fields in React applications. It provides a simple way to format user input in real-time, such as phone numbers, credit card numbers, dates, and more.

What are rifm's main functionalities?

Basic Formatting

This feature allows you to format input fields in real-time. The example shows how to format a phone number input.

import { Rifm } from 'rifm';

function App() {
  return (
    <Rifm
      value={value}
      onChange={setValue}
      format={(str) => str.replace(/\D+/g, '').replace(/(\d{3})(\d{3})(\d{4})/, '($1) $2-$3')}
    >
      {({ value, onChange }) => <input value={value} onChange={onChange} />}
    </Rifm>
  );
}

Custom Masking

This feature allows you to apply custom masks to input fields. The example shows how to format a credit card number input.

import { Rifm } from 'rifm';

function App() {
  return (
    <Rifm
      value={value}
      onChange={setValue}
      format={(str) => str.replace(/\D+/g, '').replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4')}
    >
      {({ value, onChange }) => <input value={value} onChange={onChange} />}
    </Rifm>
  );
}

Date Formatting

This feature allows you to format date inputs. The example shows how to format a date input in MM/DD/YYYY format.

import { Rifm } from 'rifm';

function App() {
  return (
    <Rifm
      value={value}
      onChange={setValue}
      format={(str) => str.replace(/\D+/g, '').replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')}
    >
      {({ value, onChange }) => <input value={value} onChange={onChange} />}
    </Rifm>
  );
}

Other packages similar to rifm

react-text-mask

react-text-mask is a library for creating input masks in React. It provides a flexible way to define masks and supports a variety of input types. Compared to rifm, react-text-mask offers more configuration options and supports both React and vanilla JavaScript.

react-input-mask

react-input-mask is another library for masking input fields in React. It provides a simple API for defining masks and supports a wide range of input types. Compared to rifm, react-input-mask is more focused on providing a straightforward way to apply masks without additional formatting logic.

cleave.js

cleave.js is a JavaScript library for formatting input fields. It supports a variety of formats, including credit card numbers, phone numbers, and dates. Compared to rifm, cleave.js offers more built-in formats and is not limited to React, making it a more versatile option for different types of projects.

README

RIFM - React Input Format & Mask

Is a tiny (≈ 800b) component (and hook) to transform any input component into formatted or masked input.

Demo

Highlights

• Requires React 16.8+
• Dependency free
• Tiny (≈ 800b)
• Supports any input.
• Can mask input, format and more
• Small readable source
• flow + typescript definitions

Example

Rifm offers both a Render Prop and a Hook API:

Render Prop

import { Rifm } from 'rifm';
import TextField from '@material-ui/core/TextField';
import { css } from 'emotion';

const numberFormat = (str: string) => {
  const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
  return r ? r.toLocaleString('en') : '';
}

...

  const [value, setValue] = React.useState('')

  <Rifm
    value={value}
    onChange={setValue}
    format={numberFormat}
  >
    {({ value, onChange }) => (
      <TextField
        value={value}
        label={'Float'}
        onChange={onChange}
        className={css({input: {textAlign:"right"}})}
        type="tel"
      />
    )}
  </Rifm>

...

Hook

import { useRifm } from 'rifm';
import TextField from '@material-ui/core/TextField';
import { css } from 'emotion';

const numberFormat = (str: string) => {
  const r = parseInt(str.replace(/[^\d]+/gi, ''), 10);
  return r ? r.toLocaleString('en') : '';
}

...

  const [value, setValue] = React.useState('')

  const {
    value,
    onChange,
  } = useRifm({
    value,
    onChange: setValue,
    format: numberFormat
  })

  <TextField
    value={value}
    label={'Float'}
    onChange={onChange}
    className={css({input: {textAlign:"right"}})}
    type="tel"
  />

...

Install

yarn add rifm

API

Terminology

Rifm is based on simple idea (*):

• format operation applied to input value after edit doesn't change the order of some symbols before cursor

* This is not always true, but we solve some edge cases where it's not.

Imagine you have simple integer number formatter with ` as thousands separator and current input state is 123`4|67 ("|" shows current cursor position).

User press 5 then formatted input must be equal to 1`234`5|67.

The overall order of elements has changed (was 1->2->3->`->4->... became 1->`->2->3->4...) but the order of digits before cursor hasn't changed (was 1->2->3->4 and hasn't changed).

The same is true for float numbers formatting, dates and more. Symbols with preserved order are different and depends on format. We call this kind of symbols - "accepted" symbols.

Rifm solves only one task - find the right place for cursor after formatting.

Knowledge about what symbols are "accepted" and cursor position after any user action is enough to find the final cursor position.

Most operations which are not covered with above idea like case enforcements, masks guides, floating point ","=>"." replacement can be done using simple postprocessing step - replace. This operation works well if you need to change input value without loosing cursor position.

And finaly masks - masks are usually is format with replace editing mode + some small cursor visual hacks.

Input Props

These are accepted by the Rifm component as props and the useRifm hook as named arguments.

Prop	type	default	Description
accept	RegExp (optional)	/\d/g	Regular expression to detect "accepted" symbols
format	string => string		format function
value	string		input value
onChange	string => void		event fired on input change
children	({ value, onChange }) => Node		value and onChange handler you need to pass to underlying input element
mask	boolean (optional)		use replace input mode if true, use cursor visual hacks if prop provided
replace	string => string (optional)		format postprocessor allows you to fully replace any/all symbol/s preserving cursor
append	string => string (optional)		format postprocessor called only if cursor is in the last position and new symbols added, used for specific use-case to add non accepted symbol when you type

Output Props

These will be passed into the children render prop for the Rifm component as named arguments, and returned from the useRifm hook as an object.

Prop	type	default	Description
value	string		A formatted string value to pass as a prop to your input element
onChange	SyntheticEvent => void		The change handler to pass as a prop to your input element

See the Demo there are a lot of examples there.

Thanks

@TrySound for incredible help and support on this