@tdc-cl/x-form

Declarative forms for React

Created at The Dog Company

Good news!

You can already use the new nomenclature for fields, e.g. text instead of $Text, for versions >= 3.2.0.

Installation

• Install x-form and its peer dependencies, using your package manager of choice

Option 1: npm

npm install --save @tdc-cl/x-form immutable js-joda decimal.js

Option 2: yarn

yarn add @tdc-cl/x-form immutable js-joda decimal.js

For TypeScript users, type definitions are already included, so you don't need to install a @types/... package.

Basic usage

Let's create a login form

import { useForm, $Form, $Text, $Password, $Checkbox, $Button } from '@tdc-cl/x-form';

function MyLoginFormComponent() {
    const form = useForm($Form({
        fields: {
            user: $Text('Username'),
            pass: $Password(),
            remember: $Checkbox('Remember me'),
        },
        submit: $Button('Log in', {
            async onValid(values) {
                // make a request to your endpoint here
            },
            onInvalid: 'disable',
        }),
    }));

    return form.render();
}

Documentation

https://hackmd.io/izREMyHCQAKNmNZOq7ujmw

License

MIT © Robin40