react-smart-form v2.0.21

react-smart-form

A form component that containes all the functionality you will need.

Installation

Examples

Documentation

Installation

Install with yarn or npm

yarn add react-smart-form
        #or
npm install react-smart-form --save

Examples

Basic

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {Form, Input, Submit} from 'react-smart-form';

class MyComponent extends Component {
    onSubmit=(values)=>{
           console.log(`Username: ${values.username}`);
           console.log(`Password: ${values.password}`);
    }
    render() {
        return (
            <Form onSubmit={this.onSubmit}>
                <Input name="username" label="Username" />
                <Input name="password" label="Password" type="password" />
                <Submit>
                    Login
                </Submit>
            </Form>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Validation

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {Form, Input, Submit} from 'react-smart-form';
import {required, length, email} from 'react-smart-form/validators';


/* 
* the react-smart-form asks if the field has error 
* so you must return false if it doesn't 
* or true (or a string message) if it does
*/
const numberCustomValidator = message=>(value)=>{
    if(typeof value !== 'number'){
        return message || true;
    }
    return false;
}

class MyComponent extends Component {
    onSubmit=(values)=>{
           console.log(`Username: ${values.username}`);
           console.log(`Password: ${values.password}`);
    }
    render() {
        return (
            <Form onSubmit={this.onSubmit}>
                <Input 
                    name="username" 
                    label="Username" 
                    validators={[required('Email is required'),email('This is not correct email.')]}
                />
                <Input 
                    name="password" 
                    label="Password" 
                    type="password" 
                    // silent validation
                    validators={[required(),numberCustomValidator('This must be a number')]}

                    />
                <Submit>
                    Login
                </Submit>
            </Form>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Handle custom errors and loading state

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {Form, Input, Submit} from 'react-smart-form';

const fakeRequest = ()=>{
  return new Promise((resolve)=>{
      setTimeout(resolve,1000);
  })  
};

class MyComponent extends Component {
    onSubmit=(values)=>{
           console.log(`Username: ${values.username}`);
           console.log(`Password: ${values.password}`);
           // Returning a promise react-smart-form can handle loading state of the form.
           return fakeRequest().then((resp)=>{
               if(!resp.data.success){
                   throw {
                       username:'This username doesn\'t exist.'
                   }    
               }
               
           });
    }
    render() {
        return (
            <Form onSubmit={this.onSubmit}>
                <Input name="username" label="Username" />
                <Input name="password" label="Password" type="password" />
                <Submit>
                    Login
                </Submit>
            </Form>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Custom input custom errors and loading state

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {smartForm, smartInput, withFormState} from 'react-smart-form';


let CustomForm = (props)=>{
    const {
        smartForm, // include loading(bool):the loading state of the form, disabled(bool):the disabled state of the form
        children,
        ...formPros
    } = props;
    return (
        <div>
            <form {...formPros}>
            {children}
            </form>
        </div>
  )};

CustomForm=smartForm()(CustomForm); 

let CustomField = (props)=>{
    const {
        smartForm, // include error(string || bool): the error of the field
        label,
        ...inputProps
    }=props;
    return (
        <div>
             <label>Custom field: {label}</label>
             <input {...inputProps} />
             <div>{smartForm.error}</div>
        </div>
  )};

CustomField=smartInput()(CustomField);


let CustomButton = (props)=>{
    const {
        smartForm, // include loading(bool):the loading state of the form, disabled(bool):the disabled state of the form
        ...buttonProps
    } = props;
    return (
        <div>
            <button {...buttonProps} disabled={smartForm.disabled}>
            {smartForm.loading ? 'loading...':children}
            </button>
        </div>
  )};

CustomButton=withFormState(CustomButton);

class MyComponent extends Component {
    render() {
        return (
            <CustomForm onSubmit={this.onSubmit}>
                <CustomField name="email" label="Email" validators={[required('This is required')]}/>
                <CustomButton>Press</CustomButton>
            </CustomForm>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

withValidator only

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {withValidator} from 'react-smart-form';
import {required} from 'react-smart-form/validators';

let CustomField = (props)=>{
    const {
        error
        label,
        ...inputProps
    }
    return (
        <div>
             <label>Custom field: {label}</label>
             <input {...inputProps} />
             <div>{error}</div>
        </div>
  )};

CustomField=withValidator(CustomField);

class MyComponent extends Component {
    render() {
        return (
            <form>
                 <CustomField name="email" label="Email" validators={[required('This is required')]}/>
            </form>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Reset form

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {Form, Input, Submit} from 'react-smart-form';

class MyComponent extends Component {
    render() {
        return (
            <div>
                <Form formRef={(form)=>{ this.form=form; }}>
                    <Input name="username"/>
                </Form>
                <button onClick={()=>{this.form.reset('username')}}>Reset Username</button>
                <button onClick={()=>{this.form.reset()}}>Reset All</button>
            </div>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Match password

import React,{ Component } from 'react';
import { render } from 'react-dom';
import {Form, Input, Submit} from 'react-smart-form';
import {required} from 'react-smart-form/validators';


class MyComponent extends Component {
    onSubmit=(values)=>{
           console.log(`Username: ${values.username}`);
           console.log(`Password: ${values.password}`);
    }
    matchPasswordValidator = message=>(value)=>{
        if(value !== this.form.getValues('password')){
            return message || true;
        }
        return false;
    }
    render() {
        return (
            <Form 
            formRef={(form)=>{this.form=form}}
            onSubmit={this.onSubmit}
            >
                <Input 
                    showPassword={false}
                    name="password" 
                    label="Password" 
                    type="password" 
                    // silent validation
                    validators={[required()]}
                    />
                <Input 
                    showPassword={false}
                    name="repassword" 
                    label="Re enter password" 
                    type="password" 
                    validators={[required(),this.matchPasswordValidator('Password does not match')]}
                    />
                    
                <Submit>
                    Register
                </Submit>
            </Form>
        );
    }
}

render(
    <MyComponent/>,
    document.getElementById('app'),
);

Documentation

Form

Input

Submit

Validators

Form instance function