RIFM - React Input Format & MaskGitHub icon

Is a tiny (≈ 650-750b) component to transform any input component into formatted or masked input.

Enforcement

Number format

Note: to prevent parseInt overflow you can use maxLength on input field or write your own numberFormat.

Date format

Mask mostly the same as format, the difference that at some moment when you enter symbols replace operation used instead of insert for example when field value reached maximum length.

Use replace to inform field to use replace operation.

Phone format

Example of usage with libphonenumber-js formatter

Format Material UI text field

It can work with 3rd party Inputs without pain