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