react-text-mask-hoc

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-text-mask-hoc
0.11.04 years ago5 years agoMinified + gzip package size for react-text-mask-hoc in KB

Readme

react-text-mask-hoc · npm
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](https://github.com/text-mask/text-mask/blob/master/componentDocumentation.md) 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

-   [`TextMask`](#textmask)
-   [Adapters](#adapters)
    -   for React: `InputAdapter` and `SpanAdapter`
    -   for React Native: `TextInputAdapter` and `TextAdapter`
-   [`TextMaskTransformer`](#textmasktransformer)

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

API

TextMask

A component that grants text-mask functionality to the passed component.
It's a controlled component by default, but it also maintains its own state, however it can also be switched to uncontrolled.
Props
  • all text-mask settings
  • Component (React.Component): A component that follows the adapter specification.
  • [value] (String|Number): A value that will be masked. Will be used as an initial value on mounting, and later
can be used to control the component. If `isControlled` prop is set to `false`, the value will be ignored on
rerenders. Defaults to `null`.
  • [isControlled] (Boolean): A way to set the component behaviour to be controlled by a value prop or to ignore
it (to be uncontrolled). Can also be used to switch it in runtime. Defaults to `true`.
  • [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()

Adapters

Adapters are React components that implement a special interface for the withTextMask.
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.

TextMaskTransformer

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