https://github.com/elsangedy/use-input-mask
https://github.com/elsangedy/use-input-mask
hooks input-mask react text-mask
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/elsangedy/use-input-mask
- Owner: elsangedy
- License: mit
- Created: 2019-07-19T15:03:26.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-09-05T23:00:33.000Z (almost 7 years ago)
- Last Synced: 2025-03-25T18:54:04.731Z (over 1 year ago)
- Topics: hooks, input-mask, react, text-mask
- Language: JavaScript
- Homepage: https://use-input-mask.now.sh
- Size: 10.7 KB
- Stars: 16
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-input-mask
![MIT License][license-badge]
[![downloads][downloads-badge]][npmcharts]
[![PRs Welcome][prs-badge]][prs]
[](#contributors)
## Installation
```bash
$ yarn add use-input-mask
# or
$ npm i use-input-mask
```
## Usage
```jsx
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 ;
};
export default MyDateInput
```
## Roadmap
* [ ] tests
* [ ] ci/cd
* [ ] semantic-release
* [ ] docs
* [x] all-contributors
## Inspiration
[text-mask](https://github.com/text-mask/text-mask)
## Contributors
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Munir Ahmed Elsangedy
💻 📖
Renato Ribeiro
📖
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
## LIENSE
MIT
[license-badge]: https://img.shields.io/npm/l/use-input-mask.svg?style=flat-square
[downloads-badge]: https://img.shields.io/npm/dm/use-input-mask.svg?style=flat-square
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[npmcharts]: http://npmcharts.com/compare/use-input-mask