A higher-order text-mask component for React and React Native.
- Install
- Usage
- API
createMaskedComponent
- Adapters
- for React:
InputAdapter
andSpanAdapter
- for React Native:
TextInputAdapter
andTextAdapter
- for React:
yarn add react-text-mask-hoc
or
npm install --save react-text-mask-hoc
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
A HOC granting text-mask
functionality to the wrapped component.
Arguments
AdaptedComponent
(React.Component): A React component that follows the adapter specification.
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