2.0.0 • Published 3 years ago

use-imask v2.0.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

use-imask npm npm bundle size NPM

React hook that exposes IMask object

Installation

npm install use-imask

or if you use yarn

yarn add use-imask

Usage

const maskOptions = { mask: Number }; // make sure options don't change on each render (use constant or useMemo or ref)

function Example() {
  const [value, setValue] = useState("");

  const [ ref ] = useIMask(maskOptions, {
  // use onAccept callback instead of onChange to change value
    onAccept: e => { 
      setValue(e.target.value);
    },
  });

  return (
    <input ref={ref} value={value} />
  );
}

Props

nametypedescription
options\<M extends AnyMaskedOptions>mask options, when options change updateOptions function is called by the IMask object
onAccept(e: ChangeEvent\<E>, mask: InputMask\<M> | undefined) => voidfunction called on IMask accept event
onComplete(e: ChangeEvent\<E>, mask: InputMask\<M> | undefined) => voidfunction called on IMask complete event

Return value

nametypedescription
refRefObject\<HTMLInputElement|null>apply this to your input element
maskRefRefObject\<InputMask\<M> | undefined>ref with IMask object