react-formalize

react-formalize

• serialize forms with react
• pass defaults to form or input
• easy two-way data binding
• validation messages
• works great with flux, redux and friends
• fully customizable

Demos

• Simple example
• Bootstrap integration

Table of Contents

• Installation
• Usage
• Customization
• API
• Examples
• License

Installation

npm install react-formalize --save

Usage

import { Component } from 'react';
import { Form, Text, Select } from 'react-formalize';

export default class MyForm extends Component {

    handleSubmit(values) {
        console.info('Submit', values);
        // {
        //    title: 'Lorem ipsum dolor ist',
        //    category: 'news'
        // };
    }

    render() {
        const post = {
            title: 'Lorem ipsum dolor ist',
            category: 'news'
        };

        return (
            <Form
                values={post}               
                onSubmit={this.handleSubmit}
                onChange={this.handleChange}>
                <div>
                    <label>Title</label>
                    <Text
                        name="title"
                        placeholder="Enter title"/>
                </div>
                <div>
                    <label>Category</label>
                    <Select
                        name="category"   
                        placeholder="Choose category..."
                        options={{news: 'News', sport: 'Sport'}}/>
                </div>
                <div>
                    <button type="submit">Submit</button>
                </div>
            </Form>
        );
    }
}

API

Primitives

<Form>

Form component, manages data and events

Props

• view: (Function) the element your content will be rendered in
• children: (Component|Function) children components
• values: (Object) the form's initial values
• messages: (Object) validation messages by input names
• onSubmit: (Function) submit handler
• onChange: (Function) change handler
• disabled: (Boolean) disable form and it inputs

Form component source

Example

<Form
    onSubmit={this.onSubmit}
    onChange={this.onChange}
    values={post}
    messages={messages}
    disabled={saving}>
    {/* Input components ... */}
</Form>

<Input>

Input component wrapper, connects to Form component, receives and propagates data, do not use directly.

Props

• name: (String) name of the input field
• value: (Array|Boolean|Number|Object|String) value of the input field
• serialize: (Function) function that extracts the input's data from the change event
• children: (Component) children components

Input component source

Example

import React, { PropTypes, Component } from 'react';
import { Input } from 'react-formalize';

export default class MyCustomTextField extends Component {

    renderInput(props) {
        return ;
    }

    render() {
        return (
            <Input {...this.props}>
                {props => <input type="text" {...props}/>}
            </Input>
        );
    }
}

<Message>

Message component, connects to Form component, receives messages

Props

• name: (String) name of the related input field
• renderMessage: (Function) render a custom message
• children: (Function) children components

Message component source

Example

<Form>
    <Text name="title"/>
    <Message name="title">{message => <p>{message}</p>}</Message>
</Form>

Build in input components

<Text>

Native text input component

Props

• name: (String) name of the input field
• type: (String) One of: text, date, datetime, datetime-local, email, month, number, password, tel, time, search, url, week. Default is text

Text component source

Example

<Form>
    <Input name="title"/>
    <button type="submit">Submit</button>
</Form>

• Text (Source)
• TextArea (Source)
• Checkbox (Source)
• RadioGroup (Source)
• Select (Source)

Examples

Run the simple example:

cd react-formalize
npm install
cd react-formalize/examples/simple
npm install
npm start

License

MIT