redux-form-input-masks

by renato-bohler

renato-bohler /redux-form-input-masks

Input masking with redux-form made easy

133 Stars 9 Forks Last release: over 1 year ago (v2.0.1) MIT License 308 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

redux-form-input-masks

travis ci build status percentage of code coverage by tests latest release code style: prettier commitizen friendly semantic release license MIT

Documentation and examples

Migration guide

Getting started

redux-form-input-masks
is a library that works with
redux-form
to easily add masking to
Field
s.
Example GIF

Motivation

Redux is awesome and so are input masks: they help standardizing inputs and improves the UX of the application.

redux-form
has support for input formatting, parseing and normalizing, but it can get pretty tricky to implement a mask with these functions.
redux-form-input-masks
offer simple APIs to create these masks so you don't need to worry about it!

Also, the value of the

Field
s in any application should be agnostic of how the
Field
s themselves are presented to the user. For example, if there's a currency field in a form, it makes more sense to store the value as a number. Storing
Field
values in a way that makes more sense for the application makes it easier to integrate form data with backend services and to create validations for it. With
redux-form-input-masks
you can also choose how the value of a formatted
Field
will be stored in the application's store.

Under the hood

redux-form-input-masks
returns objects implementing
redux-form
's Value Lifecycle Hooks and also some Global Event Handlers to manage the caret position.

Installation

npm install --save redux-form-input-masks

or

yarn add redux-form-input-masks

Features

  • simple to setup: works with
    redux-form
    out of the box, you just need to install
    redux-form-input-masks
    and you're good to go;
  • simple to use: import a mask creator and apply it... and that's it. There's no need to change the component you're already using;
  • flexible: lets you choose how you want the input mask to behave;
  • dependency compatible:
    redux-form-input-masks
    works with basically all combinations of versions of
    react
    ,
    react-dom
    ,
    react-redux
    ,
    redux
    and
    redux-form
    ;
  • browser compatible: works on all major browsers (Chrome, Firefox, Safari, Edge, Opera, Opera Mini and Internet Explorer >= 10);
  • lightweight: not a single dependency is added to
    redux-form-input-masks
    ;
  • compatible with component libraries like
    material-ui
    and
    redux-form-material-ui
    's wrappers, for both v0-stable and v1-beta versions.

Available masks

| Name | Description | API Reference | Demo | | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------- | | Number Mask | Ideal for currency, percentage or any other numeric input. Supports prefix, suffix, locale number formatting and even more options. You can also choose wether the value is stored as

number
or
string
. | createNumberMask | codesandbox.io | | Text Mask | Flexible string mask. Lets you specify the pattern, inputtable characters and much more. | createTextMask | codesandbox.io |

Usage

It's super simple to apply a mask using this library. You just need to import your mask creator from

redux-form-input-masks
, specify the parameters and pass it to the
Field
using spread attributes. Yep, it's that easy.

You can find several examples including demos on our documentation.

Here's a simple snippet that uses

createNumberMask
and
createTextMask
and applies them to
Field
s:
import { createNumberMask, createTextMask } from 'redux-form-input-masks';

(...)

const currencyMask = createNumberMask({ prefix: 'US$ ', suffix: ' per item', decimalPlaces: 2, locale: 'en-US', })

const phoneMask = createTextMask({ pattern: '(999) 999-9999', });

(...)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.