@tutim/headless/headless/src/form/hooks/useForm.d.ts

form infrastructure for web applications

import { PartialFormConfig, UseFormOptions, UseFormReturn } from '@tutim/types';
/**
 * a hook to manage form infrastructure.
 *
 * @remarks
 * [API](https://docs.tutim.io/) • [Builder](https://tutim.io/)
 *
 * @param props - form configuration
 *
 * @returns methods - individual functions to manage the form state. {@link UseFormReturn}
 *
 * @example
 * ```tsx
 *  const config = {
 *   fields: [
 *     { key: 'firstName', label: 'First Name', type: 'text', defaultValue: 'first' },
 *     { key: 'lastName', label: 'Last Name', type: 'text' },
 *     { key: 'clicker', label: 'Click Me', type: 'custom', defaultValue: 0, Field: CustomField },
 *   ],
 * };
 *
 * export const HeadlessForm = (): JSX.Element => {
 *   const { fieldsByKey, watch, handleSubmit } = useForm(config);
 *   const name = watch('firstName');
 *
 *   return (
 *     <form onSubmit={handleSubmit(console.log)}>
 *       {fieldsByKey['firstName']}
 *       {name === 'first' && fieldsByKey['lastName']}
 *       {fieldsByKey['clicker']}
 *       <input type="submit" />
 *     </form>
 *   );
 * };
 * ```
 */
export declare const useForm: (config: PartialFormConfig, options?: UseFormOptions) => UseFormReturn;