@formeum/core

@formeum/core

The core Formeum core package. This package handles the context, error state, touched state and validation. All other packages are optional.

Installation

npm i --save @formeum/core

Usage

Each form must be generated using the createForm function. This generates the typed context, hooks and components.

// myForm.ts

import { createForm } from '@formeum/core';

interface MyFormValues {
    myField: string;
    // more fields here
}

export const myForm = createForm<MyFormValues>();

The return value now contains all the typed form hooks and components. These can be used to render and handle the form:

import { myForm } from './myForm.ts';

export const MyComponent = () => (
    <myForm.FormHandler initialValues={{ myField: "" }} onSubmit={() => Promise.resolve()}>
        <label>
            First name

            <myForm.FormHTMLInput name="myField">
                {props => <input {...props} />}
            </myForm.FormHTMLInput>
        </label>

        <myForm.FormCallback>
            {({ submitForm }) => (
                <button onClick={() => submitForm()}>Submit</button>
            )}
        </myForm.FormCallback>
    </myForm.FormHandler>
);

This is a basic example, but Formeum exports many different hooks and components which use each other internally, meaning you can extract different bits of logic you need and use the library in a way which suits you. It is recommended to look at the full JSDocs to see these. You can also see and play with many examples in the storybook documentation.