react-text-mask-hoc ·
A higher-order text-mask component for React and React Native.
Table of Contents
- Install
- Usage
- API
createMaskedComponent
- Adapters
- for React:
InputAdapter
andSpanAdapter
- for React Native:
TextInputAdapter
andTextAdapter
- for React:
Install
yarn add react-text-mask-hoc
or
npm install --save react-text-mask-hoc
Usage
;; // You can provide your own adapter component or use one of included in the library.const MaskedInput = ; state = value: '5554953947' ; { this; } { return <div> <MaskedInput mask='(' /[1-9]/ /\d/ /\d/ ')' ' ' /\d/ /\d/ /\d/ '-' /\d/ /\d/ /\d/ /\d/ guide=false value=thisstatevalue onChange=_thisonChange /> </div> ; }
The only difference in usage in React Native is another adapter specific to the platform is needed.
; const MaskedInput = ; // same as above
API
createMaskedComponent(AdaptedComponent)
A HOC granting text-mask
functionality to the wrapped component.
Arguments
AdaptedComponent
(React.Component): A React component that follows the adapter specification.
Adapters
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