Filtered-input NPM

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

import React from 'react';
import ReactDOM from 'react-dom';
import FilteredInput from 'filtered-input';

ReactDOM.render(
  <form action="index.html" method="post" noValidate>
    <FilteredInput id="fullname" name="fullname" type="text" filterPattern="^[a-z\s]+$" validatePattern="^[a-z\s]{5,20}$" onChange={onChange} />
  </form>, 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. 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.