react-forma v0.0.1-alpha.5

Forma

Forma is a convenient way to build React forms with custom inputs of any kind. Written in TypeScript.

Motivation

TBD.

Usage (will be expanded in future)

First, wrap your control using withForm HOC:

// src/components/TextInput
import React from 'react';
import { withForm } from 'react-forma';

const TextInput = ({ id, value, onChange }) => (
    <input id={id} className="text-input" type="text" value={value} onChange={e => onChange(e.target.value)} />
);

export default withForm(TextInput, { defaultValue: '' });

After it you can use this component inside Form.

import { Form } from 'react-forma';

// ...

handleChange(values) {
    // Form values are passed into onChange & onSubmit props
    const msg = Object.keys(values).map(key => `${key}: ${values[key]}`).join(';\n');
    alert(msg);
}

// ...

<Form className="form" onChange={this.handleChange} onSubmit={this.handleSubmit}>
    <TextInput name="username" label="Username" />
    <TextInput name="first_name" label="First name" />
    <TextInput name="last_name" label="Last name" />
    <Checkbox name="receive_emails" label="Receive emails" />

    <Button submit label="Submit" />
</Form>

License

Forma is MIT licensed.