use-mask-input

A React Hook for build elegant input masks.

Todo

• [ ] Enhance bundle sizes
• [ ] Make tests :P
• [ ] Better example page with GH pages

Features

• ✨ Compatible with React Hook Form
• 🎯 No complex API

Install

npm install --save use-mask-input
## or
yarn add use-mask-input

Quickstart

import React from 'react'
import useMaskInput from 'use-mask-input';

const App = () => {
  const ref = useMaskInput({
    mask: ['999-999', '999-9999']
  })

  return (
    <input type="text" ref={ref} />
  )
}

Usage with React Hook Forms

import React from 'react'
import useMaskInput from 'use-mask-input';
import { useForm } from 'react-hook-form';

const App = () => {
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  const maskedPhoneRef = useMaskInput({
    mask: ['(99) 9999 9999', '(99) 9 9999 9999'],
    register: register,
  })

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="phone" ref={maskedPhoneRef} /> {/* register an input */}
      <input type="submit" />
    </form>
  )
}

License

MIT © eduardoborges