bigyanpoudel/react-global-modal

Use modal in any component with in the application without any pain 😭

react-global-modal's Issues

How to place GlobalModalWrapper inside RouterProvider

Hi,

Context

I'm integrating global modal in an existing application whose app.tsx looks like this:

export constApp: React.FC<AppProps> = ({
  appId,
  application,
}) => {
  const resolvedApp = application ?? ApplicationLoader.load(appId);
  const app = Parser.parseApplication(resolvedApp);

  const globalModalRef = useRef(null);
  useEffect(() => {
    GlobalModal.setUpModal(globalModalRef.current);
  }, []);

  const router = useMemo(
    () =>
      createBrowserRouter([
        {
          path: "/",
          element: <Entry entry={app.home} />,
          errorElement: <ErrorPage />,
          children: app.screens.map((screen) => {
            return {
              path: `${screen.name.toLowerCase()}`,
              element: <Screen key={screenId} screen={screen} />,
            };
          }),
        },
      ]),
    [app],
  );
  return (
    <ApplicationContextProvider app={app}>
      <ThemeProvider>
        <RouterProvider router={router} />
        <ToastContainer />
        <GlobalModalWrapper
          customModal={CustomModalComponent}
          ref={globalModalRef}
        />
      </ThemeProvider>
    </ApplicationContextProvider>
  );
};

Issue

I have some components which I wanna show in Modal that use useNavigate and other hooks.
So, when i do something like this:

GlobalModal.push({
      component: () => <Screen screen={screen} />,
    });

It throws this error:

Potential Cause

I think its wrong placement/way the GlobalModalWrapper is configured in my app, can you point out the issue here please?

Hi, this is not really an issue

Hello, I'm just here to say it, no issues.

This library resembles very much that I created, which is react-modal-global.
I'm not blaming or anything, I just wonder, if you don't mind, if yours inspired by mine.

Error during building application with Vite

Hi there!
I am facing an issue during the building application with Vite. I migrating from create-react-app to Vite and applications works fine during the development. But I am facing an issue while building.

vite v4.3.8 building for production...
✓ 2132 modules transformed.
✓ built in 3.60s
"Modal" is not exported by "node_modules/react-modal-global/dist/index.ts", imported by "src/app/areas/asset/Asset.tsx".
file: /Users/maxmudov/enigma/liquid-web-frontend-platform/src/app/areas/asset/Asset.tsx:3:9
1: import { ReactNode, useEffect, useMemo } from 'react'
2: import { useTranslation } from 'react-i18next'
3: import { Modal } from 'react-modal-global'
            ^
4: import { Link } from 'react-router-dom'
5: import ReactGA from 'react-ga4'
error during build:
RollupError: "Modal" is not exported by "node_modules/react-modal-global/dist/index.ts", imported by "src/app/areas/asset/Asset.tsx".
    at error (file:///Users/maxmudov/enigma/liquid-web-frontend-platform/node_modules/rollup/dist/es/shared/node-entry.js:2124:30)
...

How to close/pop opened Modal before opening next one

Context

I'm opening up new Modal from inside a Modal,
I want behavior such that when new Modal is opened, it checks wether any other Modal is already opened? if it is, close it first and then open up a new Modal

Ideal Solution

To open up a new Modal when it's the first time of the application lifecycle,
And, just update the content/props of the existing modal rather than closing or opening.

Tried Methods

Tried these methods before calling GlobalModal.push

• GlobalModal.pop(0) / GlobalModal.pop()
  it creates a modal and removes it almost instantaneously (i.e., a Modal is never displayed) (noticed this behavior through inspect tab -> elements)

• GlobalModal.closeAll()
  it doesn't do anything when first Modal is opened, but when second Modal is opened (from within first one), it closes both modals, and upper behavior (as described for GlobalModal.pop()) repeats when tried to open the first modal again

settimeout inside close function

Hi. Thanks for your useful library. Is it required to add settimeout inside closing functions?
It's a bit laggy