react-vio-form

React form tool with not any dependencies.

View Demo Download Source

Intro

A lightweight, customizable react component that make easily to manage you web form. require React16+

changeLog

  • 1.2.0: form.clearError
  • 1.1.0: form.setError|form.getModel|form.submit

Install

npm install --save react-vio-form
Bash

Run example

npm start
# (in another tab)
cd example
npm start # runs create-react-app dev server

Usage

quick start

first,Customize your InputGroup Component

InputGroup.js

import React, { Component } from 'react';

class InputGroup extends Component {
    render() {
    let {
        onChange,//required 
        value,//required 
        message,//required
        title,//custom prop
        type="text"//custom prop
    }=this.props;
    return (
        <div>
            <label>{title}:</label>
            <input type={type} onChange={e=>onChange(e.target.value)}/>
            {message&&<span>{message}</span>}
        </div>
    );
  }
}
export default InputGroup;
React JSX

And then,config your form APP

Field.props:

  • component:Your customizable React Component
  • fieldName:Form field property name
  • regexp:The validate regexp
  • message:when field's validation fails,pass to InputGroup props

Form.props:

  • onSubmit: will trigger without any error

App.js

import React, { Component } from 'react';
import InputGroup from './InputGroup';
let requiredExp=/\w{1,}/;
class App extends Component {
    handleSubmit=({model})=>{
        console.log('form data is :'+JSON.stringify(model));
    }
    render() {
        return (
            <Form onSubmit={this.handleSubmit}>
                <Field component={InputGroup} fieldName="username" title="Username" 
                regexp={requiredExp} message="Not be empty"></Field>
                <Field component={InputGroup} fieldName="address" title="Address"></Field>
                <Field component={InputGroup} fieldName="password" title="Password" 
                type="password" regexp={requiredExp} message="Not be empty"></Field>
                <button type="submit">Submit</button>
            </Form>
        );
    }
}


export default App;
React JSX

callback

  • <Form onSubmit={//}> will trigger without any error
  • <Field onChange={//}> will trigger when change

App.js

class App extends Component {
    handleSubmit=({model})=>{
        //form submit callback
        console.log('form data is :'+JSON.stringify(model));
    }
    passwordChange=(value,{model,form})=>{
        //change callback
        console.log(`password:${value}`);
    }
    render() {
        return (
            <div>
                <Form onSubmit={this.handleSubmit} id="form">
                    <Field component={InputGroup} fieldName="username" title="Username"></Field>
                    <Field component={InputGroup} fieldName="password" title="Password" 
                    type="password" onChange={this.passwordChange}></Field>
                    <button type="submit">Submit</button>
                </Form>
            </div>
        );
    }
}
React JSX

API

form object can control the Form App.
how to get form object:

  • formManager.get(id)
  • the arguments to the callback function

form API:

  • setError(fieldName,message)
  • clearError(fieldName)
  • getModel()
  • submit()

App.js

import React, { Component } from 'react'
import {Form,Field,formManager} from 'react-vio-form'
let requiredExp=/\w{1,}/;
class App extends Component {
    handleSubmit=({model})=>{
        //form submit callback
        console.log('form data is :'+JSON.stringify(model));
    }
    handleOutsideSubmit=()=>{
        // submit outside Form Component
        // param is Form id
        formManager.get('form').submit();
    }
    passwordChange=(value,{model,form})=>{
        if(model.password!==model.password2){
            //set Error Message
            form.setError('password2','password2 must be equaled to password');
        }else{
            //clear Error Message
            form.clearError('password2');
        }
    }
    render() {
        return (
            <div>
                <Form onSubmit={this.handleSubmit} id="form">
                    <Field component={InputGroup} fieldName="username" title="Username"></Field>
                    <Field component={InputGroup} fieldName="password" title="Password" 
                    type="password" regexp={requiredExp} message="Not be empty" onChange={this.passwordChange}></Field>
                    <Field component={InputGroup} fieldName="password2" title="Password2" 
                    type="password" onChange={this.passwordChange}></Field>
                </Form>
                <button onClick={this.handleOutsideSubmit}>outside submit</button>
            </div>
        );
    }
}
React JSX

GitHub

violinux666/react-vio-form

??

— Read More

Download as zip