https://github.com/borbit/react-mask-mixin

Input mask for text input http://borbit.github.io/react-mask-mixin/
https://github.com/borbit/react-mask-mixin

Last synced: 4 months ago
JSON representation

Input mask for text input http://borbit.github.io/react-mask-mixin/

• Host: GitHub
• URL: https://github.com/borbit/react-mask-mixin
• Owner: borbit
• Created: 2015-03-16T20:10:04.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-04-30T18:43:33.000Z (over 8 years ago)
• Last Synced: 2024-08-10T21:16:11.094Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 28.3 KB
• Stars: 36
• Watchers: 3
• Forks: 11
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-mask-mixin

![gif](http://g.recordit.co/nKufU2TKCj.gif)

Input mask for text input.

[Example](http://borbit.github.io/react-mask-mixin/)

### Install with npm

```

npm install react-mask-mixin

```

## Usage

The goal I wanted to reach in the very beginning was to make basic `` element understand custom property `mask` which would define strict format for user input (for example date or phone number). Somewhat, I thought that `LinkedStateMixin`, from `React.addons`, made input elements understand `valueLink` property (that looks like custom at the first glance) and I naively believed that it was possible to write similar solution. After several minutes of digging into React source code it turned out that `valueLink` was a part of `` and `` implementation and `LinkedStateMixin` just utilized it. Now I wander if there is a case when `valueLink` can be used without `LinkedStateMixin`.

### Solution:

1. Wrap `` with custom component

2. Add `react-mask-mixin` into `mixins` array

3. Spread `this.mask.props` over the ``

Mixin polutes your component scope with `mask` object where It keeps eveithing needed. `mask.props` consists of several event handlers and `value` prop that you should necessarily spread over the `` element in order to enable masking.

As a code it would look like this:

```javascript

var React = require('react')

var ReactDOM = require('react-dom')

var ReactMaskMixin = require('react-mask-mixin')

var Input = React.createClass({

  mixins: [ReactMaskMixin],

  render() {

    return 

  }

})

var Component = React.createElement({

  render(): {

    return 

  }

})

ReactDOM.render(, document.body)

```

### Masking definitions

- `9` - numeric

- `A` - alphabetical

- `*` - alphanumeric

## Tests

react-mask-mixin is covered by [Mocha](http://mochajs.org/) tests. To run tests just open `test/test.html` in a browser.

## License

react-mask-mixin may be freely distributed under the [MIT license](http://en.wikipedia.org/wiki/MIT_License#License_terms).

Copyright (c) 2015 Serge Borbit <[email protected]>