Set of input tools for formatting

This project allow to create masked inputs easily. In real world you often need to create input for credit card, phone number or birthday date etc. Each of this usecases require to input value with some formatting (for example 0000-0000-000-0000 for credit card). This project could help you.

Watch demo: http://xnimorz.github.io/masked-input/

Components

• react-maskinput — react masked input,
• react-numberinput — react numeric input,
• input-core — the core module on top of which you can build any custom components,
• mask-input — vanilla masked input.

react-maskinput

A react component provide interface for creating inputs with custom mask. This component built on top of input-core.

React masked input was tested on desktop and mobile browsers:

• Desktop browsers:

• Safari >= 9
• Google Chrome
• EDGE, IE11
• Mozilla Firefox
• Opera, Yandex.browser etc.

• Mobile browsers:

• Android Chrome
• Safari IOS >= 9

Installation

npm install --save react-maskinput

or

yarn add react-maskinput

Usage

Simple usage:

1import MaskInput from 'react-maskinput';
2
3ReactDOM.render(
4    someElement, 
5    <MaskInput
6        alwaysShowMask
7        maskChar='_'
8        mask='0000-0000-0000-0000'        
9    />
10)

Changing mask in runtime, getting value on input change:

1import React, { Component } from 'react';
2import { render } from 'react-dom';
3import MaskInput from 'react-maskinput';
4
5class DateInput extends Component {
6    state = {
7        maskString: 'DD.MM.YYYY',
8        mask: '00.00.0000',
9    }
10
11    onChange = (e) => {
12        // 2 — for example        
13        if (parseInt(e.target.value[6],  10) > 2) {
14            this.setState({
15                maskString: 'DD.MM.YY',
16                mask: '00.00.00',
17            });
18        } else {
19            this.setState({
20                maskString: 'DD.MM.YYYY',
21                mask: '00.00.0000',
22            });
23        }
24    }
25
26    render() {
27        return (
28            <MaskInput 
29                onChange={this.onChange}
30                maskString={this.state.maskString}
31                mask={this.state.mask}
32                alwaysShowMask
33            />
34        );
35    }
36}
37
38render(someElement, <DateInput />);

If you need to get input's HtmlElement, you could use getReference prop:

1import React, { Component } from 'react';
2import { render } from 'react-dom';
3import MaskInput from 'react-maskinput';
4
5class SomeTopLevelComponent extends Component {    
6    getInputRef = (el) => {
7        // Now we can work with HtmlElement
8        this.input = el;
9    }    
10
11    render() {
12        return (
13            <MaskInput                                 
14                getReference={this.getInputRef}
15                alwaysShowMask
16                maskChar='_'
17                mask='0000-0000-0000-0000'   
18            />
19        );
20    }
21}
22
23render(someElement, <DateInput />);

Custom formatting function. You can create custom formatting function by setting reformat prop. As an example, you can see react-numberinput component:

1import React, { Component } from 'react';
2import MaskInput from 'react-maskinput';
3
4function removeSelectedRange(value, selection) {        
5    if (selection.start === selection.end) {
6        return value;
7    }
8
9    if (selection.end < selection.start) {
10        const tmp = selection.end;
11        selection.end = selection.start;
12        selection.start = tmp;
13    }    
14    
15    if (value.length > selection.start) {
16        return value.slice(0, selection.start).concat(value.slice(selection.end, value.length));
17    }
18    
19    return value;
20}
21
22class NumberInput extends Component {
23    // In reformat function you need to set value and selection props
24    reformat = ({data, input = '', selection}) => {
25        const newSelection = {
26            start: selection.start,
27            end: selection.end,
28        };
29
30        let value = removeSelectedRange(data.replace(/(\D)/g, (text) => text === ' ' ? ' ' : ''), newSelection);
31        const inputValue = input.replace(/\D/g, '');
32        const oldLength = value.length;
33
34        value = value.slice(0, newSelection.start) + inputValue + value.slice(newSelection.start, value.length);        
35        value = value.replace(/\s/g, '').replace(/(\d)(?=(\d\d\d)+(?!\d))/g, (text) => `${text} `);
36
37        let index = newSelection.start;
38        if (inputValue) {
39            index = Math.max(0, value.length - oldLength + index);
40        }
41        newSelection.end = newSelection.start = index;        
42
43        return {
44            value,
45            maskedValue: value,
46            visibleValue: value,
47            selection: newSelection,
48        };
49    }
50
51    render() {
52        return (
53            <MaskInput {...this.props} reformat={this.reformat} />
54        );
55    }
56}
57
58export default NumberInput;

Usage with styled-components

react-maskinput, react-numberinput pass props to input element directly. You can set up different input element properties: class, data-attributes, etc. There components works well with another libraries, CSS-in-JS solutions, such as styled-components:

1import React, { Component } from 'react';
2import MaskInput from 'react-maskinput';
3import styled from 'styled-components';
4
5const MaskedInput = styled(MaskInput)`
6    border-radius: 10px;
7    border-color: rgb(219,112,147);
8`;
9
10render(    
11    <MaskedInput
12        alwaysShowMask
13        maskChar='_'
14        mask='0000-0000-0000-0000'        
15    />
16);

Props

List of specific react-maskinput props:

• mask [String],
• reformat [Function],
• maskFormat [Array],
• maskChar [Empty string or String with one char],
• maskString [String],
• showMask [Boolean],
• alwaysShowMask [Boolean],
• getReference [Function],
• onChange [Function]

Important! All other props'll passed to input element directly. So you can set up class name, data attributes, etc.

Let's see what's doing each of props:

mask: String. Format:

   0 — any number 0-9
   * — any symbol
   a — A-Z, a-z
   q — "q" letter, 2 — "2" letter etc.
   \a — "a" letter 
 default is undefined 

[function] reformat: user function, if you want use custom reformat logic. It's userfull for numeric inputs, decimal numbers etc. If reformat defined mask will be ignored. Reformat function must receive object with several fields:

1function reformat({data: data, selection: {start, end}, input}) {
2    // realization
3
4    return {
5        [any] value: // value that stored and called in input core functions (such as reformat). Field may have any format,
6        [String] visibleValue: // value that displayed to user in input if showMask is false,
7        [String] maskedValue: // value that  displayed to user in input if showMask is true,
8        [{[integer] start, [integer] end}] selection: {start, end} — // new selection range
9    }
10}

If reformat and mask is undefined, input allow to enter any values.

You can define custom mask by passing maskFormat. This prop must be an array, each object in array have several fields: str: matched char for mask regexp: validation rule as regexp type: special

maskChar: Character to cover unfilled editable parts of mask. Default value is ''. maskString: String to cover unfilled editable parts of mask. Default is undefined. If maskString define maskChar ignored.

showMask: show mask in input. It's possible only if mask have not cyclic. Default value = false alwaysShowMask: show mask when input inactive

Callbacks: onChange(event). Event is synthetic react-event. If you want access to input value, you may use: event.target.value
getReference: Callback to get native input ref

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request

Changelog

1.0.0 several changes:

• From this moment all of tools will have similar version
• Added examples using components with another libs, such as styled-components
• Improved demo page
• Improved readme

0.1.8 Use input-core@0.1.2

0.1.7 Remove reformat prop from the input element

0.1.6 Add e.which to input event callback to support iOS@9.4

0.1.5 Add applyValue method in case you need apply new value directly (by ref)

0.1.3 Add onFocus and onBlur callbacks. Add getReference function to examples

0.1.2 Add android support, remove transform-react-jsx from mask-input build

0.1.1 Fix bug with removing static symbol

0.1.0 First publish

TODO

1. Cover all input-core with unit tests
2. Dynamically change props in demo page

License

MIT