dynamic-modal/src/hooks/modal-handler.ts

The dynamic-modal is a solution of creation different modals into project using a json configuration file

'use client';

import { useState } from 'react';

import { IModal, IModalConfigProps } from '../interfaces/modal';

interface IModalHandler {
  openModal: (config: IModalConfigProps) => void;
  modalProps: IModal;
}

export function useModalHandler(): IModalHandler {
  const initialState: IModalHandler = {
    modalProps: {
      config: {} as IModalConfigProps,
      close: () => {},
      open: false,
    },
    openModal: () => {},
  };

  const [modalConfig, setModalConfig] = useState<IModalHandler>(initialState);

  const openModal = (config: IModalConfigProps) => {
    if (!config) {
      alert(
        `¡WARNING! this modal was not returned config, please check before use`,
      );
      return;
    }

    setModalConfig({ openModal, modalProps: { config, open: true, close } });
  };

  const closeModal = () => setModalConfig(initialState);

  return {
    openModal,
    modalProps: { ...modalConfig.modalProps, close: closeModal },
  };
}