@payfit/unity-components
Version:
51 lines (50 loc) • 2.64 kB
TypeScript
import { StandardSchemaV1 } from '@standard-schema/spec';
import { JSX, PropsWithChildren } from 'react';
import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
import { FormFieldProps } from '../components/form-field/FormField.js';
import { FormProps } from '../components/form/Form.js';
import { Schema } from './use-form.types.js';
export type UseUnityFormReturn<TSchema extends Schema> = {
methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
};
/**
* A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
* @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
* @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
* @returns an object containing the bounded `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
* @example
* ```tsx
* import { useUnityForm } from '@payfit/unity-components'
* import * as z from 'zod'
*
* const schema = z.object({
* foo: z.string().min(3),
* bar: z.string().optional(),
* })
*
* function DemoForm() {
* const { Form, FormField } = useUnityForm(schema, {
* defaultValues: { foo: 'Hello world', bar: '' },
* })
*
* return (
* <Form action={() => ...}>
* <FormField name="foo" type="text">
* // ...
* </FormField>
* // Type Error: "baz" is not assignable to "foo" | "bar".
* <FormField name="baz" type="text">
* // ...
* </FormField>
* </Form>
* )
* }
* ```
* @remarks
* [API]() • [Demo]()
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
*/
export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;