joiful-react-forms v0.2.3

Joiful React Forms

Installation

npm i joiful-react-forms

Basic Usage

import { default as React, Component } from 'react'
import { default as Joi } from 'joi'
import { Form, Input } from 'joiful-react-forms'

class Form extends Component {
    render() {
        return (
            <Form
                onChange={(event, values) => this.setState({ values }) }
                onSubmit={(error, values, event) => ... } 
                schema={{
                    name: Joi.string().required(),
                    email: Joi.string().email().required(),
                    phone: Joi.string().min(10).max(12)
                }}
                values={this.state.values}
            >
                <Input name="name" />
                <Input name="email" />
                <Input name="phone" />
            </Form>
        )
    }
}

Props

<Form />

<Input />

Using custom inputs

joiful-react-forms gives you default html inputs. You can define a custom input inline using the is prop. See example below:

const TextInput = ({ error, ...props }) =>
    <div>
        <input type='text' {...props}/>
        {error}
    </div>

const Textarea = ({ error, ...props }) =>
    <div>
        <textarea {...props}/>
        {error}
    </div>

const Form = () =>
    <Form
        onSubmit={handleSubmit}
        schema={{
            name: Joi.string().required(),
            message: Joi.string().required()
        }}
    >
        <Input is={TextInput} name="name" />
        <Input is={Textarea} name="message" />
    </Form>

Or if you prefer, you can supply your application context a joifulReactForms object. See example:

class App extends Component {
    static childContextTypes = {
        joifulReactForms: PropTypes.object
    };
    getChildContext() {
        return {
            joifulReactForms: {
                Input: {
                    types: {
                        text: TextInput,
                        textarea: Textarea,
                        special: () => <input type='special'/>
                    }
                }
            }
        }
    }
    render() {
        ...
    }
}

The is property also serves as a reference the types of inputs you have in your context. We have defaults for keys like text, textarea and checkbox. As demonstrated above, you can override these with your own and may supply custom inputs which can be named anything you like and referenced as a string in the is prop. Take a look:

<Input is='textarea' />
<Input is='special' />