import { createContext, useCallback, useContext, useMemo, useState } from 'react' import { Modal } from 'react-bootstrap' export const ShowModalContext = createContext(() => null) export function ShowModalProvider ({ children }) { const [modal, showModal] = useModal() const contextValue = showModal return ( {children} {modal} ) } export function useShowModal () { return useContext(ShowModalContext) } export default function useModal () { const [modalContent, setModalContent] = useState(null) const onClose = useCallback(() => { setModalContent(null) }, []) const modal = useMemo(() => { if (modalContent === null) { return null } return (
X
{modalContent}
) }, [modalContent, onClose]) const showModal = useCallback( (getContent) => { setModalContent(getContent(onClose)) }, [onClose] ) return [modal, showModal] }