{"record":{"id":"1582d3e5f60a4c83","repo":"facebook/docusaurus","slug":"useplayground-must-be-used-within-playgroundprovid","errorCode":null,"errorMessage":"usePlayground must be used within PlaygroundProvider","messagePattern":"usePlayground must be used within PlaygroundProvider","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/docusaurus-theme-live-codeblock/src/client/context.tsx","lineNumber":33,"sourceCode":"\nexport function PlaygroundProvider({\n  value,\n  children,\n}: {\n  value: PlaygroundContextValue;\n  children: ReactNode;\n}): ReactNode {\n  return (\n    <PlaygroundContext.Provider value={value}>\n      {children}\n    </PlaygroundContext.Provider>\n  );\n}\n\nexport function usePlayground(): PlaygroundContextValue {\n  const context = useContext(PlaygroundContext);\n  if (!context) {\n    throw new Error('usePlayground must be used within PlaygroundProvider');\n  }\n  return context;\n}\n","sourceCodeStart":15,"sourceCodeEnd":37,"githubUrl":"https://github.com/facebook/docusaurus/blob/3f483e80e326cc646b54b83d564b3f0c4881b9a6/packages/docusaurus-theme-live-codeblock/src/client/context.tsx#L15-L37","documentation":"usePlayground() consumes PlaygroundContext, which is populated only by PlaygroundProvider (used by the live-codeblock Playground component). Calling the hook where useContext returns null throws 'usePlayground must be used within PlaygroundProvider'. This is the standard missing-provider guard for the live-codeblock plugin.","triggerScenarios":"Call usePlayground() from a component that is not a descendant of the Playground component (which renders PlaygroundProvider); swizzle a Playground subcomponent and render it independently; use the hook in a test without the provider.","commonSituations":"Customizing @theme/Playground or its children and moving a consumer out of the provider subtree; reusing playground subcomponents elsewhere in the site; unit tests of playground internals.","solutions":["Only call usePlayground() inside components rendered by <Playground> (which provides PlaygroundProvider).","In custom theme code, wrap the consumer in <PlaygroundProvider value={{reset}}>, or re-mount the full Playground.","In tests, render the consumer inside a PlaygroundProvider with a stub value."],"exampleFix":"// before\nfunction ResetButton() {\n  const {reset} = usePlayground(); // used outside Playground\n  return <button onClick={reset}>Reset</button>;\n}\n<ResetButton />\n// after\n<Playground ...>\n  <ResetButton />\n</Playground>","handlingStrategy":"type-guard","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Keep usePlayground consumers inside the Playground component tree.","If you swizzle Playground subcomponents, render them through <Playground>.","In tests, wrap consumers in <PlaygroundProvider value={{reset: () => {}}}>."],"tags":["react","context","live-codeblock","hooks"],"backgroundTag":null,"analyzedSha":"3f483e80e326cc646b54b83d564b3f0c4881b9a6","analyzedAt":"2026-08-12T13:25:04.382Z","schemaVersion":2},"datasetVersion":"2026-08-12T23:17:12.415Z"}