@formulier/react/dist/form.js

Simple, performant form library for React

import * as React from 'react';
import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/with-selector';
import { Formulier } from '@formulier/core';
import { invariant, useEvent } from './utils.js';
const formContext = React.createContext(undefined);
function FormProvider({ form, children }) {
    const value = React.useMemo(() => ({ form: form }), [form]);
    return React.createElement(formContext.Provider, { value }, children);
}
function useFormInstance() {
    const value = React.useContext(formContext);
    invariant(value, `useFormInstance must be used inside of FormProvider`);
    return value.form;
}
function useOptionalFormInstance() {
    const value = React.useContext(formContext);
    return value?.form || null;
}
function useCreateForm(options) {
    const [form] = React.useState(() => new Formulier(options));
    if (!form.hasMounted)
        form.setValues(options.initialValues);
    return form;
}
function useFormSelector(form, selector, equalityFn) {
    return useSyncExternalStoreWithSelector(form.store.subscribe, form.store.getState, form.store.getState, selector, equalityFn);
}
function useSubmitHandler(form, onSubmit) {
    return useEvent((event) => {
        event.preventDefault?.();
        const valid = form.validateFields();
        if (valid) {
            onSubmit(form.store.getState().values);
        }
        form.incrementSubmitCount();
    });
}
export { FormProvider, useFormInstance, useOptionalFormInstance, useCreateForm, useFormSelector, useSubmitHandler };