react-text-mask-hoc ·

A higher-order text-mask component for React and React Native.

Table of Contents

• Install
• Usage
• API
  • createMaskedComponent
  • Adapters
    • for React: InputAdapter and SpanAdapter
    • for React Native: TextInputAdapter and TextAdapter

Install

yarn add react-text-mask-hoc

or

npm install --save react-text-mask-hoc

Usage

import React, {PureComponent} from 'react';
import {createMaskedComponent, InputAdapter} from 'react-text-mask-hoc';

// You can provide your own adapter component or use one of included in the library.
const MaskedInput = createMaskedComponent(InputAdapter);

export default class Example extends PureComponent {
    state = {
        value: '5554953947',
    };

    _onChange = (event) => {
        this.setState({value: event.target.value});
    }

    render() {
        return (
            <div>
                <MaskedInput
                    mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
                    guide={false}
                    value={this.state.value}
                    onChange={_this.onChange}
                />
            </div>
        );
    }
}

The only difference in usage in React Native is another adapter specific to the platform is needed.

import {createMaskedComponent, TextInputAdapter} from 'react-text-mask-hoc/ReactNative';

const MaskedInput = createMaskedComponent(TextInputAdapter);

// same as above

API

createMaskedComponent(AdaptedComponent)

A HOC granting text-mask functionality to the wrapped component.

Arguments

• AdaptedComponent (React.Component): A React component that follows the adapter specification.

Adapters

Adapters are React components that implement a special interface for the createMaskedComponent.

List of adapters included in this library:

• for React
  • InputAdapter
  • SpanAdapter
• for React Native
  • TextInputAdapter
  • TextAdapter