react-text-mask-hoc

react-text-mask-hoc ·

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

text-mask is great. It's a feature-rich solution for creating input masks for various libraries and frameworks. However the React implementation has some long-standing bugs and feature requests that bury the potential of the library.

Features:

• Supports all features from text-mask, see its documentation for more information.
• Custom components: you can mask any components through a simple adapter interface!
• Platform agnostic: works in all browsers, React Native and Node.js (useful for server-side rendering)!

Table of Contents

• Install
• Usage
• Examples
• API
  • TextMask
  • createTextMask
  • Adapters
    • for React: InputAdapter and SpanAdapter
    • for React Native: TextInputAdapter and TextAdapter
  • TextMaskElement

Install

yarn add react-text-mask-hoc
  # or
npm install --save react-text-mask-hoc

Usage

import {TextMask, InputAdapter} from 'react-text-mask-hoc';

export default () =>
    <TextMask
        // You can provide your own adapter component or use one of included in the library.
        Component={InputAdapter}
        mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        guide={false}
        value="5554953947"
    />;

To use in React Native import react-text-mask-hoc/ReactNative instead:

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

Examples

• React
• React Native

API

TextMask

A component that grants text-mask functionality to the passed component.

It's an uncontrolled component and it maintains its own state, however it can also be controlled with props.

Props

• all text-mask settings
• Component (React.Component): A component that follows the adapter specification.
• [value] (String|Number): A value that will be masked. If set it will turn the component into the controlled one. Defaults to null.
• [onChange] (Function): A function that is called on input changes. Takes 2 arguments: the native event (varies from a platform) and the next state (has value and caretPosition properties).
• [componentRef] (Function): A function that is called with a reference to the Component.

Instance methods

• the value getter
• focus()
• blur()

createTextMask(AdaptedComponent)

A helper HOC that passes AdaptedComponent down to the TextMask.

Arguments

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

Returns

An extended TextMask.

Usage

import {createTextMask} from 'react-text-mask-hoc';

class MyAdapterComponent extends React.Component {
    // ...
}

const MyTextMaskComponent = createTextMask(MyAdapterComponent)

export default () =>
    <MyTextMaskComponent
        mask={['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]}
        guide={false}
        value="5554953947"
    />;

---

Adapters

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

List of adapters included in this library:

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

Specification

An adapter must be a React component that takes value, caretPosition and onChange props, and exposes a caretPosition getter that always returns a positive integer number.

See ReactAdapters.js and ReactNativeAdapters.js for examples.

---

TextMaskElement

A class that calculates a value and a caret position. Based on the createTextMaskInputElement() from text-mask-core.

Exported for testing purposes only.

---