Basic example

This is an example of how to use the modal provider trough the useModal. And the modal component. The modal provider is used to manage the state of the modal.

Provider

The ModalProvider is a context provider that is used to manage the state of the modal. It is used to open and close the modal. The provider is used to wrap the application in the layout.tsx file.

To use the provider you must use the useModal hook . The hook will return 4 function and 2 variable. The function are

• openModal(React.ReactNode): This function is used to open the moal. It will take a component as a parameter. The component will be rendered on the screen.
• closeModal(): This function is used to close the modal. No parameter needed.
• isModalOpen: This variable is used to check if the modal is open or not. It will return a boolean value.
• lockModal(): This function is used to lock the banner. This will make the function closeModal unavailable.
• unlockModal(): This function is used to unlock the modal. This will make the function closeModal available.
• isModalLocked: This variable is used to check if the modal is locked or not. It will return a boolean value.

1// Call hook
2const {
3  openModal,
4  closeModal,
5  isModalOpen,
6  lockModal,
7  unlockModal,
8  isModalLock,
9} = useModal();
10
11// Usage
12openModal(Your Component ...);
13closeModal();
14lockModal();
15unlockModal();
16isModalOpen;
17isModalLock;
18

Content and message

In the AlertModal and ConfirmModal you have to pass the content via.

• Title: This is the title of the alert and confirm.
• Message: The real part of the content. Message you want to tell users.
• icon: Icon that related to the content.

Color

You can set the color of the modal by using the color prop. You can find the allow color at Color guideline

Action

You can set the action of the AlertModal and ConfirmModal. There are a little different beteen them but not much. You can custom the action text via confirmText and in confirmModal you can set cancelText too.

Also the action will use the simillar name as the text you can add the action via onConfirm and in confirmModal you can set onCancel too.

Lock and Unlock

The lock and unlock function is used to prevent the modal from being closed when the user clicks outside of it. This is useful when you want to keep the banner open until the user explicitly closes it.

If you use the lock function do not use the close function in the modal component.

Modal attribute

Alert modal attribute

Confirm modal attribute