How to use React context API in remix?

[tiranuom]

Hi All,

I am new to remix and was playing with it. I needed to use React context API within remix application and when I implement, server side rendering part works perfectly. however in the client side rendering part it hangs the application throwing errors continuously.

I need to know whether,

1. React context API is supported in remix?
2. If supported is there any example I can refer?

Thanks in advance.

[sergiodxa]

It should work as usual

1. Create a context object with React.createContext (do it outside route files)
2. In some part render the context.Provider with some value
3. In another part call useContext(context) to read the value

Also note that the Outlet component has a context prop (<Outlet context={value} />) and a pair hook useOutletContext which let you share values between a parent and a child route.

And, also note that if you want to access another route (loader) data you can use the useMatches hook to get all the routes data, and you can use useRouteData from Remix Utils which uses useMatches to get the data too.

[tiranuom]

Thank you very much @sergiodxa, After your comment, I got it working.

And I found my issue also. I have implemented the context creation logic in a *.server.ts file, which was not available in the client code. Silly me.

[felixmpaulus]

Using the react api I get hydration errors when rendering the context's values in an outlet.
Using the context prop on the outlet works though.

[sayhicoelho]

I'm receiving an error ERROR: Expected ">" but found "value" when trying to import my ThemeProvider using React Context API.

[Fantros]

I have the same problem, did you solve it?

[sayhicoelho]

You can't import .js files. You must import .ts files. The Remix's documentation is messy.

[lanesky]

I found a simpler workaround - changing ".js" to ".jsx" for example theme.js to theme.jsx, that will skip the eslint.