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)

Support for optimized state holders

#35 fixes this #27

Before if value wasn't changed (for example if user enters incorrect symbol)
rifm produced onChange event, and then provided incorrect output if state above had optimization like do not change state if value has not been changed

Having that a lot of state libraries have similar optimizations (selectors in redux etc) this was a must have fix.

Delete support v2

Fix #33

18-08|-1978 where | is cursor, delete causes cursor move in incorrect position 18-08-1|978
must be 18-08-|1978

New example with string-mask library usage added
see https://istarkov.github.io/rifm/docs-readme#string-mask-input