React plain form

React simple form for everyday usage 😜

Demo

• Simple usage
• Debounced validation
• Custom validation - lib yup
• Advanced usage

Example

import React from 'react';
import { render } from 'react-dom';
import useForm from 'react-plain-form';

function Form({ schema }) {
    const {
        fields,
        values,
        isValidating,
        errors
    } = useForm(schema);
    const isErrors = !!Object.keys(errors).length;
    const handleSubmit = e => {
        e && e.preventDefault();
        console.log(values);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name
                <input {...fields.name} />
                { errors.name && <span>{errors.name}</span> }
            </label>
            <br/>
            <button
                type="submit"
                disabled={isValidating || isErrors}
            >
                Submit
            </button>
        </form>
    );
}

const formSchema = {
    name: {
        type: 'text',
        onValidate: values => new Promise((res, rej) =>
            values.name.length
                ? res()
                : rej(new Error('Name required'))
        )
    }
};

render(
    <Form schema={formSchema} />,
    document.querySelector('#root')
);

API

useForm({ schema })

| Name | Type | Defaults | Description | | ------------- | ------- | :-------------:| :----- | | schema | Object | undefined | Configuration object for you form | | schema[key] | String | undefined | name prop for future input field | | schema[value].[any] | Object | undefined | Any valid html5 attributes | | schema[value].onValidate | Function | undefined | validation function. Get values as argument and should return Promise. | | schema[value].validateOn | String or Array | change | Validation run on this events. Variants: change focus blur | | schema[value].defaultValue | String | '' | Default value

const {...} = useForm({ schema })

| Name | Type | Description | | ------------- | ------- | :----- | | fields | Object | Same as schema above, but enriched with aditions methods like onChange etc. To make input controllable. | | values | Object | Key, value pairs with name of your input and it current value. | | errors | Object | Key, value pairs with name of your input and it current value. | | isValidating | Boolean | Indicator, Does form is in validating state right now or not. | | setError | Function | Set error for field. setError(name, value). | | setValue | Function | Set value for field. setValue(name, value). | | validateAll | Function | Run all onValidate concurrently. Returns promise. Usefull to run validation on submit | | updateFields | Function | Want to add fields dynamically, pass as argument to this function new created or extended schema |