v1.1.0

RIFM 1.1 adds a builtin locale-aware number formatter at rifm/number. It formats numeric input without converting it to a JavaScript number, preserving editable states such as 1. and 1.20 as well as the precision of large integers.

Example

import { createNumberFormatter } from "rifm/number";

const euro = createNumberFormatter({
  locales: "de-DE",
  allowNegative: true,
  useGrouping: true,
  minimumFractionDigits: 2,
  maximumFractionDigits: 2,
});

const rifm = useRifm({
  value,
  onChange: setValue,
  ...euro,
});

return <input value={rifm.value} onChange={rifm.onChange} />;

Typing -12345,6 produces -12.345,60: the locale controls the decimal and grouping separators, negative values are enabled explicitly, and the fraction is padded and limited to two digits.

Full changelog: v1.0.0...v1.1.0

v1.0.0

RIFM 1.0 modernizes the package, test infrastructure, documentation, and introduces own website

Highlights

• Migrated the library from Flow/JavaScript to TypeScript
• Added generated TypeScript declarations
• Replaced Rollup with tsdown
• Replaced Jest with Vitest and added real-browser coverage with Playwright
• Added React 19 coverage while retaining the react >=16.8 peer dependency
• Migrated development and CI from Yarn/Travis to pnpm/GitHub Actions
• Added npm trusted publishing with provenance
• Replaced the legacy Next.js demo with a faster, accessible Vite website
• Reworked the README with clearer API and caret-behavior documentation

Breaking changes

• The package is now ESM-only
• The published JavaScript target is ES2022
• CommonJS require("rifm") is no longer supported
• Flow declarations and packaged source files have been removed
• Package exports are restricted to the public rifm entry point

Full changelog: v0.12.1...v1.0.0

v0.12.0

• fix cursor position after delete with multiple non-accepted chars after (Thanks to @lewisl9029)
• transpile only for >1% and not ie browsers
• size dropped from 768b to 753b
• dropped UMD bundles, use codesandbox instead

v0.11.0

In this release added react hook version of rifm. Thanks to @lewisl9029

import { useRifm } from 'rifm'

const rifm = useRifm({
  format,
  value,
  onChange
})

<TextField
  type="tel"
  value={rifm.value}
  onChange={rifm.onChange}
/>

Also rifm will warn if type=date is passed to input. Thanks to @ethanwillis

Mask improvements

#86 append property added. Allows visually improve masks like date, credit cards etc.

v0.9.0

This is a big release with new features

1. We discovered that passed values are formatted in all our cases so we decided to automatically format passed value.

 <Rifm
   format={format}
-  value={format(current)}
+  value={current}
   ...
 >

2. The edge case with fixed point numbers is solved:

You have 0|.00, then press 1, it becomes 01|.00 and after format 1.00, this breaks our assumption that order of accepted symbols is not changed after format. The result is 1.0|0.

3. replace function is changed to mask boolean. Now you may pass boolean value based on current state.

 <Rifm
-  replace={v => 10 <= v.length}
+  mask={10 <= current.length}
 >

Note: we still discovering how to make this api cleaner.

4. We added the new api for formatting with preserving cursor. It's called replace (don't confuse with previous api) and has the same type as format.

<Rifm
  format={v => v}
  replace={v =>
    'Rifm is the best mask and formatting library. I love it! '
      .repeat(20)
      .slice(0, v.length)
  }
  ...
>

This api is now responsible for case enforcement which is no longer supported by format

 <Rifm
-  format={v => v.toLowerCase()}
+  format={v => v}
+  replace(v => v.toLowerCase())
 ...
 >

5. The new docs should shed light on ideas behind RIFM and better describe api
   https://github.com/istarkov/rifm#api

Thank you for using RIFM

0.8.0

In this release rifm is refactored with hooks. Gzipped size is reduced from 909 to 627 bytes. This big win allows us to add more features and still fit into 1kb lib. Note: api is still render prop based.

Confusing refuse prop is replaced with inverted version accept. We decided that whitelist (regexp) is more straightforward way to parse values. For example

• refuse={/$^/} becomes accept={/.+/g}
• refuse={/[^\d]+/g} becomes accept={/\d+/g}

In Saturday we deployed our new website. With this release we handled a few edge cases for number and date formats and added some styles to make examples nicer

Letter case support

It's often useful to enforce lower or upper case in inputs but it's not enough to run string.toLowerCase() in value/onChange data flow. In this release we added support for casing.

<Rifm format={v => v.toLowerCase()} refuse={/$^/} value={value} onChange={setValue}>
  {({ value, onChange }) => (
    <input value={value} onChange={onChange} />
  )}
</Rifm>

There is also a small DX improvement. Rifm shows error when you are trying to bind input with type="number" which manipulates only numbers when rifm manipulates strings.

Allow textarea in flow types

Nothing critical. Just fixed flow type.

TypeScript support

We just added TypeScript definition (thanks to @rosskevin and @ozio)