edmundhung

@conform-to/react

import { type FormId, type FieldName } from '@conform-to/dom';

import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions } from './context';

 * This basically makes it a no-op on server

export declare const useSafeLayoutEffect: typeof useEffect;

export declare function useFormId<Schema extends Record<string, unknown>, FormError>(preferredId?: string): FormId<Schema, FormError>;

export declare function useNoValidate(defaultNoValidate?: boolean): boolean;

export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId' | 'onSchedule'> & {

export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {

     * The form id. If not provided, a random id will be generated.

     * Enable constraint validation before the dom is hydated.

    ReturnType<FormMetadata<Schema, FormError>['getFieldset']>

export declare function useFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, options?: {

export declare function useField<FieldSchema, FormSchema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]>(name: FieldName<FieldSchema, FormSchema, FormError>, options?: {

    formId?: FormId<FormSchema, FormError>;

    FieldMetadata<FieldSchema, FormSchema, FormError>,

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');

var useSafeLayoutEffect = typeof document === 'undefined' ? react.useEffect : react.useLayoutEffect;

  return preferredId !== null && preferredId !== void 0 ? preferredId : id;

  var defaultNoValidate = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;

  var [noValidate, setNoValidate] = react.useState(defaultNoValidate);

    // This is necessary to fix an issue in strict mode with related to our proxy setup

    // It avoids the component from being rerendered without re-rendering the child

    // Which reset the proxy but failed to capture its usage within child component

    formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);

  var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {

    onSchedule: callback => reactDom.flushSync(callback),

    document.addEventListener('input', context$1.onInput);

    document.addEventListener('focusout', context$1.onBlur);

    document.addEventListener('reset', context$1.onReset);

      document.removeEventListener('input', context$1.onInput);

      document.removeEventListener('focusout', context$1.onBlur);

      document.removeEventListener('reset', context$1.onReset);

    context$1.onUpdate(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {

  var subjectRef = context.useSubjectRef();

  var state = context.useFormState(context$1, subjectRef);

  var noValidate = useNoValidate(options.defaultNoValidate);

  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);

  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

  var context$1 = context.useFormContext(formId);

  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);

  var context$1 = context.useFormContext(options.formId);

  var field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);

  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);

exports.useFormMetadata = useFormMetadata;

exports.useSafeLayoutEffect = useSafeLayoutEffect;

	"description": "Conform view adapter for react",

		"url": "https://github.com/edmundhung/conform",

		"url": "https://github.com/edmundhung/conform/issues"

		@@ -7,3 +7,2 @@ 'use strict';
		var react = require('react');
		var reactDom = require('react-dom');
		var context = require('./context.js');
		@@ -42,3 +41,2 @@
		var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
		onSchedule: callback => reactDom.flushSync(callback),
		formId
		@@ -45,0 +43,0 @@ })));

		@@ -6,3 +6,3 @@ {
		"license": "MIT",
		"version": "1.0.3",
		"version": "1.0.4",
		"main": "index.js",
		@@ -34,12 +34,10 @@ "module": "index.mjs",
		"dependencies": {
		"@conform-to/dom": "1.0.3"
		"@conform-to/dom": "1.0.4"
		},
		"devDependencies": {
		"@types/react": "^18.2.64",
		"@types/react-dom": "^18.2.20",
		"@types/react": "^18.2.43",
		"react": "^18.2.0"
		},
		"peerDependencies": {
		"react": ">=18",
		"react-dom": ">=18"
		"react": ">=18"
		},
		@@ -46,0 +44,0 @@ "keywords": [

Improved metrics

Worsened metrics

Dependency changes

		@@ -11,3 +11,3 @@ import { type FormId, type FieldName } from '@conform-to/dom';
		export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
		export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId' \| 'onSchedule'> & {
		export declare function useForm<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
		/**
		@@ -14,0 +14,0 @@ * The form id. If not provided, a random id will be generated.