https://github.com/tiendq/filtered-input

A simple input that only accepts characters based on a Regex pattern
https://github.com/tiendq/filtered-input

es6 form npm react validation

Last synced: about 2 months ago
JSON representation

A simple input that only accepts characters based on a Regex pattern

• Host: GitHub
• URL: https://github.com/tiendq/filtered-input
• Owner: tiendq
• License: mit
• Created: 2016-12-27T03:00:12.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2018-05-05T01:43:35.000Z (over 6 years ago)
• Last Synced: 2023-12-26T06:06:09.361Z (about 1 year ago)
• Topics: es6, form, npm, react, validation
• Language: JavaScript
• Size: 61.5 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# filtered-input

A simple input that only accepts characters based on a Regex pattern. My intention is just limiting characters could be entered into an input field, no masking capability, no formatting etc.

## Usage

Simply install and import component like below code:

`yarn add filtered-input`

```js

import React from 'react';

import ReactDOM from 'react-dom';

import FilteredInput from 'filtered-input';

ReactDOM.render(

  

    

  , document.getElementById("root")

);

```

### Properties

Besides below properties, you could add any HTML input attributes as usual except `value`.

#### `type`

Input type e.g. text, email. `Required`

#### `filterPattern`

A RegEx pattern to filter which characters are allowed to enter in the input. `Required`

#### `validatePattern`

A RegEx pattern to validate current input value, relied on [validator.matches](https://github.com/chriso/validator.js). `Required`

#### `onChange`

Called on change event with current `value` and validation result `passed` if `validatePattern` is supplied. You could use it to get input value or change input control appearance based its validation state.

#### `customFormatter`

Called with current `value` to provide formatting capability e.g. 5000 becomes 5,000

## Examples

1. Run `yarn start` from `examples` folder

2. Visit `http://localhost:8080`

Copyright (c) 2016 Tien Do

MIT License