sanniassin / react-input-mask

Input masking component for React. Made with attention to UX.
MIT License
2.22k stars 257 forks source link

Provide hooks API #267

Open austincondiff opened 3 years ago

austincondiff commented 3 years ago

I'd much rather prefer an API like this that allows react-input-mask to stay out of the business of rendering my input.

const PhoneInput = ({ value, placeholder, onChange, ...props }) => {
  const { maskedValue, eventProps } = useInputMask({
    mask: '(+1) 999 999 9999' 
    value,
    onChange
  });

  return (
    <input
      value={maskedValue}
      placeholder={placeholder || "Enter phone number..."}
      {...props}
      {...eventProps} 
    />
  );
}
ianchanning commented 1 year ago

Leaving a note here for potential examples of how it could be done. Downshift useSelect seems like a close use case and has a nice example of working with a Material UI component which is kind of the semi-default for this library too.