React input mask
npm install enda-react-imask

npm install react-imaskjavascript
import { useRef } from 'react';
import { IMaskInput } from 'react-imask';// use ref to get access to internal "masked = ref.current.maskRef"
const ref = useRef(null);
const inputRef = useRef(null);
mask={Number}
radix="."
value="123"
unmask={true} // true|false|'typed'
ref={ref}
inputRef={inputRef} // 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
`javascript
import { IMaskMixin } from 'react-imask';// extend style component
const StyledInput = styled.input
;const MaskedStyledInput = IMaskMixin(({inputRef, ...props}) => (
{...props}
innerRef={inputRef} // bind internal input (if you use styled-components V4, use "ref" instead "innerRef")
/>
));
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.Using hook
`javascript
import { useState } from 'react';
import { useIMask } from 'react-imask';function IMaskWithHook () {
const [ opts, setOpts ] = useState({ mask: Number });
const {
ref,
maskRef,
value,
setValue,
unmaskedValue,
setUnmaskedValue,
typedValue,
setTypedValue,
} = useIMask(opts, /* optional {
onAccept,
onComplete,
ref,
defaultValue,
defaultUnmaskedValue,
defaultTypedValue,
} */);
return (
);
}
``