use-input-mask

MIT License downloads PRs Welcome All Contributors

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
Munir Ahmed Elsangedy

💻 📖
Renato Ribeiro
Renato Ribeiro

📖

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

LIENSE

MIT

Use Input Mask

Use Input Mask Info

⭐ Stars17
🔗 Source Codegithub.com
🕒 Last Update2 years ago
🕒 Created3 years ago
🐞 Open Issues1
➗ Star-Issue Ratio17
😎 Authorelsangedy