Skip to main content

Hooks Overview

EFX-Forms provides a comprehensive set of React hooks for accessing form state, methods, and field data. All hooks work within the form context or can target specific forms by name.

Available Hooks​

Form Hooks​

HookDescriptionImport
useFormGet form data and methods combinedefx-forms/useForm
useFormDataGet form state stores (values, errors, etc.)efx-forms/useFormData
useFormInstanceGet raw form instance with all stores and eventsefx-forms
useFormValuesGet form values onlyefx-forms/useFormValues
useFormMethodsGet form methods only (change, reset, submit, etc.)efx-forms/useFormMethods
useFormStoreGet single form store by nameefx-forms/useFormStore
useFormStoresGet multiple form stores by nameefx-forms/useFormStores

Field Hooks​

HookDescriptionImport
useFieldGet field data and methods combinedefx-forms/useField
useFieldDataGet field state (value, active, error, etc.)efx-forms/useFieldData
useFieldStoreGet single field store valueefx-forms/useFieldStore

Utility Hooks​

HookDescriptionImport
useStorePropGet property from any effector storeefx-forms/useStoreProp

Usage Pattern​

All hooks accept an optional formName parameter. When used within a <Form> context, the form name is inferred automatically. When used outside context or targeting a different form, provide the formName explicitly.

import { Form } from 'efx-forms';
import { useForm, useField } from 'efx-forms';

// Inside form context - formName inferred
const InsideForm = () => {
  const { values, change } = useForm();
  const { value, error } = useField('username');
  return <div>{value} - {error}</div>;
};

// Outside context - formName required
const OutsideForm = () => {
  const { values, submit } = useForm('my-form');
  const { value } = useField('email', 'my-form');
  return <button onClick={submit}>Submit</button>;
};

const Page = () => (
  <Form name="my-form" onSubmit={console.log}>
    <InsideForm />
    <OutsideForm />
  </Form>
);