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