elsangedy / use-input-mask

use-input-mask

Installation

$ yarn add use-input-mask
# or
$ npm i use-input-mask

Usage

import React from 'react'

import useInputMask from 'use-input-mask'

import { createAutoCorrectedDatePipe } from "text-mask-addons";

const MyDateInput = props => {
  const input = useRef(null);

  const autoCorrectedDatePipe = createAutoCorrectedDatePipe("dd/mm/yyyy HH:MM");

  const onChange = useInputMask({
    input,
    onChange: props.onChange,
    mask: [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/],
    pipe: autoCorrectedDatePipe,
    keepCharPositions: true
  });

  return <input {...props} ref={input} onChange={onChange} />;
};

export default MyDateInput

Roadmap

• tests
• ci/cd
• semantic-release
• docs
• all-contributors

Inspiration

text-mask

Contributors

Thanks goes to these wonderful people (emoji key):

Munir Ahmed Elsangedy 💻 📖

Renato Ribeiro 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

LIENSE

MIT

use-input-mask's Issues

Migrate to TS