Input Wizard

A lightweight input validator built for ReactJS

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

• Install
• How to use
• API
  • TextBox
  • Rules
• Style

Codesandbox example

Install

npm install --save react-input-wizard

Basic Usage

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>
    )
  }
}

API

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. name: The name of the rule. value: A pattern or a data value for support the rule. message: The custom message rule.
errorCallback (optional)	func	undefined	If passed will return the current error found in the input

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. 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. 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. 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.

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