Where in my React tree should I put the CroctProvider?
just installed @croct/plug-react and I am not sure how high up the tree the provider actually needs to be. I have a few routes that read content and one that runs an evaluation, and I do not want to wrap the plug again per route.
Is there a rule for where CroctProvider should live?
2 answers
Mount CroctProvider once, near the root of your app, above anything that needs Croct. Every descendant can then use the hooks and components without wrapping the plug again.
import {CroctProvider} from '@croct/plug-react';
export function App() { return ( <CroctProvider appId="00000000-0000-0000-0000-000000000000"> <Routes /> </CroctProvider> );}The appId identifies the application, and any component below the provider can call useContent, useEvaluation or useCroct. Because the provider owns the plug instance, initialization options like debug and track are set here, on the provider, not per hook.
A single provider at the root covers every route, so you never re-wrap it per page. See set up the React SDK for the full initialization walkthrough and the available provider options.
One concrete gotcha from our setup: put it above the router, not inside a route element. We had it mounted per page at first and got a hook-outside-provider error on a component that rendered before its route did. Moving CroctProvider up so it wraps the whole router made that go away.