@mirco312312/react-imask
v6.0.6
Published
React input mask
Downloads
46
Maintainers
Readme
React IMask Plugin
react-imask
Install
npm install react-imask
Mask Input Example
import {IMaskInput} from 'react-imask';
<IMaskInput
mask={Number}
radix="."
value="123"
unmask={true} // true|false|'typed'
inputRef={el => this.input = el} // access to nested input
// DO NOT USE onChange TO HANDLE CHANGES!
// USE onAccept INSTEAD
onAccept={
// depending on prop above first argument is
// `value` if `unmask=false`,
// `unmaskedValue` if `unmask=true`,
// `typedValue` if `unmask='typed'`
(value, mask) => console.log(value)
}
// ...and more mask props in a guide
// input props also available
placeholder='Enter number here'
/>
Extend Existing Components
import {IMaskMixin} from 'react-imask';
// extend style component
const StyledInput = styled.input`
color: green;
`;
const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
<StyledInput
{...props}
innerRef={inputRef} // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
/>
));
<MaskedStyledInput
mask={Number}
radix="."
onAccept={(value, mask) => console.log(value)}
// ...and more mask props in a guide
// ...other styled props
/>
More options see in a guide.