Pass Next.js router to an npm React component library (with Jotai)

[Bilal-Mubeen]

I’ve built a standalone React library that will be published as an npm package. The library is framework-agnostic (not tied to Next.js or React Router) and mainly provides UI + logic components.

Some parts of the library need to perform navigation (e.g., router.push("/something")). Since the library doesn’t know which routing system the consuming app will use, I want to let the host app inject its router into the library at runtime.

I’m using Jotai to manage this. Inside the library, I keep a routerAtom and export a hook to set it:

export const router = atom<Router>({
  push(url: string): void {
    if (typeof window !== 'undefined') {
      window.location.href = url
    }
  },
})

export const useSetRouter = () => {
  const setRouter = useSetAtom(router)
  return useCallback((router: Router) => setRouter(router), [setRouter])
}

In the Next.js app, I grab the real Next.js router and set it into the library:

const setDesignLibraryRouter = useSetRouter();

useEffect(() => {
  setDesignLibraryRouter({
    ...router,
    push: async (url) => {
      await router.push(url);
    },
  })
}, [router, setDesignLibraryRouter]);

What I’ve tried

Using Jotai’s global store (without a Provider) → didn’t work
Wrapping with Provider and passing getDefaultStore() → didn’t work
Wrapping with Provider and passing createStore() → didn’t work

My expectation
Whenever the library calls routerAtom.push(...), it should call Next.js’s router.push(...) and navigate properly.

Question
How can I correctly inject the Next.js router into my design library’s Jotai store so that navigation works across app + library?

[Wendystraite]

First I should remind you that you should use jotai-scope's createIsolation to prevent your library and your app from sharing the same store.
I haven't used it yet but the doc is pretty clear.

As for your problem it revolves around syncing a "React value" into an atom that lives outside React.
There are a lot of discussions/issues around this idea (like #1488 or #669).
Basically you have two choices:

• Syncing the value once at mount using useHydrateAtoms.
• Syncing the value every time it changes using either useEffect, useHydrateAtoms (with dangerouslyForceHydrate) or other more complicated ways discussed in the threads linked.

I'd suggest useHydrateAtoms since this is the recommended "easy" way to do this.
For code example jotai tanstack query uses it https://github.com/jotaijs/jotai-tanstack-query/blob/899bd4cb97f74eae2ce925aa3b7f09bf04ccccc0/src/react.ts#L11

[Bilal-Mubeen]

@Wendystraite Thanks for the suggestion! I already looked into jotai-scope and useHydrateAtoms, but I don’t think they apply to my situation as my library is a standalone npm package that depends on the data from different applications.

In my case, the issue isn’t about hydrating values or syncing a React prop into an atom. My library already sets and updates atoms correctly when used in isolation.

The problem only appears when I consume the library inside a Next.js app.

The discussions/issue around this that the code useSetRouter hook in the library is being called but the value of the atom in the store is not updating. As i am using the Provider less approach means using the global store so if i am updating any atom it should be updated.

[Bilal-Mubeen]

I created a hook that is exposed to the nextjs application. and used that hook directly to update the value. Remember the hook is placed at the same place where i had this defaultStore used. Since i am using the provider less approach.

`
const store = getDefaultStore()

const router = atom({
push(url: string): void {
if (typeof window !== 'undefined') {
window.location.href = url
}
},
})
//This is a hook that is exposed to the nextjs to update the value .
export const setRouter = (routerNext: Router): void => {
store.set(router, routerNext)
}
`

Note: If i move this setRouter to another file the store update is not working even if i try to use another hook setAtomValue either .

[Bilal-Mubeen]

The issue got resolved when i use the useHydrateAtoms in my library and exported as hook to the next application. In the next application i used the hook when the router is initialized and passed the router to the hook.

Note: Just want i don't want any state related variable to the apps and want to enclose everything in the library did this stuff. In other case if the store for the app and library is same you can directly use the useHydrateAtoms directly.

Library Code
export const useSetRouter = (initialRouter: Router) => { // useHydrateRouter(initialRouter) useHydrateAtoms([[routerAtom, initialRouter]]); }

NextJs App Code
const router = useRouter(); useSetRouter(router)