# react-input-wizard

> A lightweight input validator built for ReactJS

Latest version **1.0.3** (published 2020-04-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-input-wizard
pnpm add react-input-wizard
yarn add react-input-wizard
bun add react-input-wizard
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-04-20 |
| First published | 2020-03-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 0 |
| Unpacked size | 48.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | PeterPimentel |
| Maintainers | peterpimentel |

## Links

- npm: https://www.npmjs.com/package/react-input-wizard
- Repository: https://github.com/PeterPimentel/react-input-wizard
- Homepage: https://github.com/PeterPimentel/react-input-wizard#readme
- Issues: https://github.com/PeterPimentel/react-input-wizard/issues
- npm.io page: https://npm.io/package/react-input-wizard

## Recent versions

- 1.0.3 (latest) — 2020-04-20
- 1.0.2 — 2020-03-27
- 1.0.1 — 2020-03-25
- 1.0.0 — 2020-03-24

## README

<p align="center">
    <img src="./docs/assets/wizard.png" alt="React chat logo" width="120"/>
</p>
<h1 align="center" style="border-bottom: none;">Input Wizard</h1>

<h4 align="center">A lightweight input validator built for ReactJS</h4>

[![NPM](https://img.shields.io/npm/v/react-input-wizard.svg)](https://www.npmjs.com/package/react-input-wizard) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Remember it is only an input validator, you must handle form submit events.

- [Install](#install)
- [How to use](#basic-usage)
- [API](#api)
    - [TextBox](#textbox)
    - [Rules](#rules)
- [Style](#style)

[Codesandbox example](https://codesandbox.io/s/github/PeterPimentel/react-input-wizard/tree/master/example)

## <a name="install"></a>Install

```bash
npm install --save react-input-wizard
```
## <a name="basic-usage"></a>Basic Usage

```jsx
import React, { Component } from 'react'

import TextBox from 'input-wizard'

class InputExample extends Component {
  handleChange(e) {
    this.setState({ [e.target.name]: e.target.value })
  }

  render () {
    return (
      <div>
        <div>Username</div>
        <TextBox
          //HTML input common parameters
          name="username"
          placeholder="Username"
          required
          //To controll the input value
          value={this.state.username}
          //A generic controll is all we need
          onChange={this.handleChange.bind(this)}
          //Rules that will be validated
          rules={[
            {
              name: 'minLength',
              value: 3,
              message: "Your username must have at least 3 letters"
            }
          ]}
        />
      </div>
    )
  }
}
```

## <a name="api"></a>API

### <a name="textbox"></a>TextBox

This component is like a simple input that can revice all common html props.


| Prop          | Type    | Default        | Description                                                                                                           |
| ------------- | ------- | -------------- | --------------------------------------------------------------------------------------------------------------------- |
| rules      | Array    | ```[{name, value, message}]``` | Pass the rules you want to be validated.<br><br> ```name:``` The name of the rule.<br>  ```value:``` A pattern or a data value for support the rule.<br> ```message:``` The custom message rule.||
| errorCallback (optional) | func  | undefined             | If passed will return the current error found in the input                                                                     |

### <a name="rules"></a>Rules

|Rule   |Format   |Description   |
|---|---|---|
|required   | ```{name:"required", message:"Your custom message here"}```|Check if the string has a length of zero or is empty|
|minLength   | ```{name:"minLength",value:the_length, message:"Your custom message here"}```|Check if the string's minimum length falls in the value passed. <br> ```value:``` The MIN String length.|
|maxLength   | ```{name:"maxLength",value:the_length, message:"Your custom message here"}```|Check if the string's max length falls in the value passed. <br> ```value:``` The MAX String length.|
|email   | ```{name:"email", message:"Your custom message here"}```|Check if the string is an email.|
| pattern| ```{name:"pattern",value:your_regex, message:"Your custom message here"}```|check if string matches the pattern.<br> Try it: ```/^\d{5}(?:[-\s]\d{4})?$/```|
|isNumber| ```{name:"isNumber", message:"Your custom message here"}```|Check if string is a number.|
|CPF| ```{name:"CPF", message:"Your custom message here"}```|Check if a CPF is valid.|
|custom| ```{name:"custom",value:YourValidator(input) => Boolean, message:"Your custom message here"}```|Create a custom validator here, your funtion must return ```true``` or ```false```.|

### <a name="style"></a>Style
We provid some css classes that will help you style your input as your wish.

- in-wizard-container
  - Root element: ```div```
- in-wizard-item
  - ```input```
- in-wizard-item-explain
  The ```div``` wrapping the error message  ```span```  

## License

MIT © [PeterPimentel](https://github.com/PeterPimentel)

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