@elbstack/react-text-mask-hoc
v0.10.6
Published
A higher-order text-mask component for React and React Native.
Downloads
42
Readme
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
withTextMask
- Adapters
- for React:
InputAdapter
andSpanAdapter
- for React Native:
TextInputAdapter
andTextAdapter
- for React:
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. IfisControlled
prop is set tofalse
, the value will be ignored on rerenders. Defaults tonull
.[isControlled]
(Boolean): A way to set the component behaviour to be controlled by avalue
prop or to ignore it (to be uncontrolled). Can also be used to switch it in runtime. Defaults totrue
.[onChange]
(Function): A function that is called on input changes. Takes 2 arguments: the nativeevent
(varies from a platform) and the next state (hasvalue
andcaretPosition
properties).[componentRef]
(Function): A function that is called with a reference to theComponent
.
Instance methods
- the
value
getter focus()
blur()
withTextMask(AdaptedComponent)
A helper HOC
that passes AdaptedComponent
down to the TextMask
.
Arguments
AdaptedComponent
(React.Component): A component that follows the adapter specification.
Returns
An extended TextMask
.
Usage
import {withTextMask} from 'react-text-mask-hoc';
class MyAdapterComponent extends React.Component {
// ...
}
const MyTextMaskComponent = withTextMask(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
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.