Interface EasyFormDialogProps

The props type of EasyFormDialog.

interface EasyFormDialogProps {
    title: ReactNode;
    submitButtonText: string;
    submitButtonClass?: string;
    cancelButtonText?: string;
    submitEnabled?: boolean;
    formIsValid: boolean;
    showValidation: boolean;
    onShowValidationChange(showValidation): void;
    onSuccess(payload): Promise<void>;
    onClose(): void;
    onSubmit(formData): Promise<void> | Promise<undefined | {
        shouldClose?: boolean;
        responseData: unknown;
    onCancel?(): void;
    closeRef?: MutableRefObject<(() => void)>;
    modalClass?: string;
    focusFirst?: boolean;
    showFooter?: boolean;


title: ReactNode

The title of the dialog. Can be a JSX element.

submitButtonText: string

The text of the submit button.

submitButtonClass?: string

The CSS class of the submit button.

cancelButtonText?: string

The text of the cancel button. Defaults to "Cancel".

submitEnabled?: boolean

Allows you to disable the submit button even if getSubmitEnabled() would return true.

This can be useful if you want to disable the submit button while a query is in progress.

formIsValid: boolean

A boolean indicating if the form is valid.

showValidation: boolean

A boolean indicating if validation feedback is being shown.

closeRef?: MutableRefObject<(() => void)>

This prop accepts a ref object that holds a function of type () => void. You can execute the function to programmatically close the dialog:


Type declaration

    • (): void
    • Returns void

modalClass?: string

The CSS class added to the underlying Bootstrap modal.

focusFirst?: boolean

Set to false to disable the default behavior of focusing the first input.

showFooter?: boolean

Set to false to hide the modal footer, which contains the submit and cancel buttons.


  • A callback that fires when the dialog is submitted.


    • showValidation: boolean

    Returns void

  • A callback that fires after the submit function succeeds.

    If the submit function returned responseData, it is passed to your onSuccess function.

    Your onSuccess callback must return a promise. The submit button will continue showing a loading indicator until the promise resolves. This is to support refetching the data that was updated by the form submission.


    • payload: unknown

    Returns Promise<void>

  • A callback that fires when the dialog has completely closed. Your onClose callback should update call, for example, setDialogVisible(false) so that the EasyFormDialog is no longer rendered.

    Returns void

  • A callback that fires when the form is submitted. You will typically perform an API call in your submit function.

    Your submit function can optionally return an object in the shape

    shouldClose?: boolean
    responseData: unknown

    Using formData is deprecated. Use controlled components instead.

    formData will be {} if the optional peer dependency jquery is not installed.


    • formData: Record<string, string | boolean>

    Returns Promise<void> | Promise<undefined | {
        shouldClose?: boolean;
        responseData: unknown;