React-input-wizard NPM

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

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

@infinitebrahmanuniverse/nolb-react-in @everything-registry/sub-chunk-2562

4 years ago

4 years ago

4 years ago

4 years ago