Skip to main content

useProjectFormModal

The useProjectForm hook is a custom hook used to open the modals of create/edit project

There are two types of modals: a Create Project modal and an Edit Project modal. These modals are used to create a new project or edit an existing project respectively.

Components​

  • open(props?)

    This is a helper function inside useProjectFormModal. It opens a modal with the given props. The props can include whether the modal is for creating or editing a project (isCreate), any component props for the ProjectFormModal (componentProps), and any additional modal props (modalProps).

  • openCreateModal()

    This function, returned by useProjectFormModal, opens a 'Create Project' modal. It doesn't take any parameters.

  • openEditModal(item: IProjectItem)

    This function, also returned by useProjectFormModal, opens an 'Edit Project' modal. It takes an IProjectItem object as a parameter, which represents the project to be edited. It prepares the initial values for the form based on the item parameter and opens the modal.

Usage​

To use this hook in a component, import it and call it like any other hook:

import useProjectFormModal from '../hooks/useProjectFormModal'

const { openCreateModal, openEditModal } = useProjectFormModal()

// will open a clean project modal
<button onClick={() => openCreateModal()}>
    Create
</button>

// will open a project modal with item data
<button onClick={() => openEditModal(item)}>
    Edit
</button>

Then, you can use openCreateModal and openEditModal to open the respective modals.