@formeum/core

npm version License: GPL v3 codecov code style: prettier Codacy Badge Node.js CI Netlify Status Netlify Status

Storybook TypeDoc TypeScript RollupJS React

@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.

Generated using TypeDoc