create-plume-react-project
Version:
CLI to create Plume React Project
50 lines (48 loc) • 1.55 kB
text/typescript
import { ReactNode } from 'react';
import { FieldError } from 'react-hook-form';
export type FormFieldProps = {
/**
* The name of the input
*/
name: string,
/**
* The field optional error object returned by the `useForm` hook.
* For example:
* ```typescript
* const { errors } = useForm<FormValuesType>();
* [...]
* <FormField error={errors.myFieldName}>
* <input name="myFieldName" ref={register({ required: true })} .../>
* </FormField>
* ```
*/
error?: FieldError,
/**
* The mapping function that will be called if {@link error} is set
* to try to resolve the corresponding message depending on the error type.
* For example:
* ```typescript
* const myFieldNameErrorMessageMapping = (error: FieldError) => {
* if (error.type === 'validate') {
* return 'myFieldName is not valid, it does not respect the form XXX';
* }
* // leave the FormField handle other errors
* return undefined;
* }
* ```
*
* Do note that this `errorMessageMapping` should generally by generated by {@link makeErrorMessageMapping}:
* ```typescript
* const myFieldNameErrorMessageMapping = makeErrorMessageMapping(
* 'myFieldName is not valid, it does not respect the form XXX'
* );
* ```
*
* The usage of `errorMessageMapping` requires the FormField error field to be set in order to be executed
*/
errorMessageMapping?: (error: FieldError) => string | undefined,
/**
* The field content children nodes
*/
children?: ReactNode,
};