epicweb-dev / restore-scroll Goto Github PK

As title says.
I'm trying to restore the scroll within a MUI table but it doesn't seem to work with the package versions mentioned in the title.
The ScrollRestoration from React Router Dom would work for the window.body but i did need this feature for tables as well.
Trying to play around with query selector didn't work, nor did trying to select different components to restore the scroll to.
Besides this, I see in the session storage that the library does save scrolling position ( stacking them instead of re-using them however ), but browsing back to / directly to a page doesn't restore my scrolls.
Is there a working example available for React Rouer Dom 6.21.xxx ? As this feature is not supported by React Router Dom in its current state this library would have helped a lot.

I tried to use it, with React router v6

so, i have router config with createBrowserRouter:

  const router = createBrowserRouter([
    {
      path: '/',
      element: <Layout />,
      children: [
        {
          path: '/',
          element: <Home />,
        },
        {
          path: '/dashboard',
          element: <Dashboard />,
        },
      ],
    },
  ]);

then in the Home component i'm rendering a chat:

<div>
   <div
          id="chatContainer"
          className="h-full flex flex-col gap-3 overflow-y-scroll scroll-smooth"
          ref={ref}
        >
          {renderHelper}
   </div>
   <ElementScrollRestoration elementQuery="#chatContainer" />
</div>      

The renderHelper only makes some validating, and insert prompts and answers, it scrolls, cool, but when i nav to Dashboard, and comeback to Home, the scroll position is not saved, it at top

I will provide a Codesandbox later, but i don't know if i can recreate the exact thing, because it's a bigger project, with many things rappening on the chat.

But i think the scroll part is this, the #chatContainer, render on page load, and stays there forever, even if has no messages, so the reference to the ElementScrollRestoration exists

I tried this package and it doesn't work. Can you show a working example? (CodeSandbox or Stackblitz)

I've been noticing that ElementScrollRestoration does not work on iOS Safari, or at least not reliably. I could pinpoint the issue to useBeforeUnload not being triggered due to window.onbeforeunload not being supported. There have been similar reports for react-router-dom (remix-run/react-router#9463), which have been fixed by switching to listening to window.pagehide (remix-run/react-router#9945). Monkey patching or rather just forking ElementScrollRestoration and adding and using the usePageHide hook fixes these problems for me. If this is a known bug that does not only affect me for some reason, I'd be happy to help out with a pull request.

When I use in my Remix app, I get an error saying it's not wrapped with data router. If I copy paste ElementScrollRestoration and modify import from react-router-dom to @remix-run/react, it works.

useNavigation must be used within a data router. See https://reactrouter.com/routers/picking-a-router.

Can this library cover Remix usage as well?

Versions and setup

• Remix: 2.3.0, 2.9.1
• react-router-dom: 6.21.0
• Vite
• Custom express server