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:
text-mask
, see its
documentation for more information.TextMask
InputAdapter
and SpanAdapter
TextInputAdapter
and TextAdapter
TextMaskTransformer
yarn add react-text-mask-hoc
# or
npm install --save react-text-mask-hoc
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';
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
text-mask
settingsComponent
(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
value
getterfocus()
blur()
Adapters are React components that implement a special interface for the
withTextMask
.
List of adapters included in this library:
InputAdapter
SpanAdapter
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.