The core Formeum core package. This package handles the context, error state, touched state and validation. All other packages are optional.
npm i --save @formeum/core
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