# react-inputator

> React form input validator

Latest version **0.1.0** (published 2017-07-31) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-inputator
pnpm add react-inputator
yarn add react-inputator
bun add react-inputator
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2017-07-31 |
| First published | 2017-07-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nicolas Dufreche |
| Maintainers | ndufreche |
| Keywords | react, form, validator |

## Links

- npm: https://www.npmjs.com/package/react-inputator
- npm.io page: https://npm.io/package/react-inputator

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.0 (latest) — 2017-07-31

## README

# react-input-validator

A customisable and extendible form validator for react apps

## Usage

Create your form and by using the specials input you will recieve the validity of the value in onChange and onBlur event.

```js
handleChange(event) {
  event.target.onError // is false if all the requierement are valid eles is true
  event.target.isEmpty // is true when the input is empty
  event.target.isValid // is true if the input value is corresponding to the validation
}
```

## Usage Example

```js
import React, { Component } from 'react'
import { Email, Password } from 'react-input-validator'

class LoginForm extends Component {

  constructor(props) {
    super()
    this.state = {
      value: {
        email: '',
        password: '',
      },
      invalid: {
        email: true,
        password: true,
      },
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) {
    const newState = {
      value: {},
      invalid: {},
    }

    newState.value[event.target.id] = event.target.value
    newState.invalid[event.target.id] = event.target.onError

    this.setState(newState)
  }

  render() {
    return (
      <form>
        <Email id="email" onChange={this.handleChange} value={this.state.value.email} required />
        <Password id="password" onChange={this.handleChange} value={this.state.value.password} min={6} required />
        <input type="submit" value="Login" disable={this.state.invalid.email || this.state.invalid.password} />
      </form>
    )
  }
}

export default LoginForm
```

## Custom input

### Parameters in common for all Input

All inputs have this following options available


`required` => force the input to be not empty

`onChange` => onChange event

`onBlur` => onBlur event


And all the default parameters for an input like `className`, `id`, `onFocus`, etc.

### Input Text

#### options

`validate` => A regex or a function to validate the value

#### example

```js
import React from 'react'
import { Text } from 'react-input-validator'

const PhoneInput = (props) => (
  <Text validate={/((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}/} {...props} />
)

export default PhoneInput
```

### Input Password 

#### options

`min` => minimum of characters number

`max` => maximun of characters number

`upper` => require uppercase character 

`lower` =>  require lowercase character

`special` => require special character

`number` => require number character

#### example

```js
import React from 'react'
import { Password } from 'react-input-validator'

const StrongPasswordInput = (props) => (
  <Password min={10} upper lower special number {...props} />
)

export default StrongPasswordInput
```

### Input Email

#### options

There is no special option for input type email

#### example

```js
import React from 'react'
import { Email } from 'react-input-validator'

const EmailInput = (props) => (
  <Email {...props} />
)

export default EmailInput
```

---
_Source: https://npm.io/package/react-inputator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._