Adding ThemeProvider to interactive code editor

[binhxn]

Hello,

I'd like to add a ThemeProvider wrapper from a component library to be used in Interactive code editor, but am unsure where to add this functionality. Any ideas on how to go about this? Everything else works as expected though.

[slorber]

Hi,

It is possible to swizzle/wrap/enhance the Root component and add your extra providers at the top of the tree:
https://docusaurus.io/docs/next/using-themes#wrapper-your-site-with-root

It is also possible to swizzle the React-Live scope to add custom components and make them available in the playground:
https://docusaurus.io/docs/next/markdown-features/code-blocks#imports

[binhxn]

Hello, thanks for the reply! Regarding the first option, when I attempted to wrap the Root component, nothing seems to happen. For example:

// website/src/theme/Root.js
import React from 'react';
import { ThemeProvider } from 'some-library'

function Root({children}) {
  return <ThemeProvider>{children}</ThemeProvider>;
}

export default Root;

I also tried adding this within docs/src/theme/Root.js. To add some context, I'm trying to make a Doc-only website. Was I also supposed to run a swizzle command?

For option 2, I may not be able to go with this approach since my components depend on the ThemeProvider.

edit: I've also tried to swizzle the Playground component from @docusaurus/theme-live-codeblock and wrap my ThemeProvider there, but no luck either.

[slorber]

@binhxn it's likely you do something wrong, and I can't help you without a full repro. Other users have reported that the provider in Root worked fine.

You can inspect your React tree with React dev tools and see for yourself if the provider is in the tree or not. If it is there, then the problem is not in the Docusaurus integration but rather in some other part of your code.

Solution 2 is not a solution, it is a requirement if you want to use an external lib in the live code editor, as you can't add ES imports in the live code block it is the only way to make your component library.

You have to use BOTH Root + React-live scope to achieve your goal

[binhxn]

I ended up re-installing node_modules and the Root component/file worked as expected. You're right I may have done something wrong on my end. I apologize for the confusion!