[Design Question]Why styleguidist rendered ReactExample Component outside of the root Component?

[MrKou47]

I'm trying to control my examples use a global redux store(e.g. my components has two different theme, i want to use a global button to change those theme props).But i find that the ReactExample components rendered outside the StyleGuide component Preview.js#L78,so they can't be controlled by me.I want to know why this part is designed like this, and could i change this part?

[sapegin]

Each example is a separate React app because we only have a string with the source code, that we need to eval.

What you want to do could be a good idea for a plugin — #505 — any help with the plugin API is very appreciated ;-)

[MrKou47]

I had achieved my idea by using react@16 context, every my component wrapped by ThemeComponent and it can get theme prop from the query from window.location.href.
But i'm afraid i'm not clearly know which work does plugin API do and i can't find any doc about plugin API.I guess it will give us some ability for decorate styleguide component🤔?But when i want to change some styleguide component, i will create my own styleguide component and put it in the styleguide.config.js.

like:

  styleguideComponents: {
    Wrapper: path.join(__dirname, './src/frameworks/styleguide/Wrapper.js'),
    ComponentsListRenderer: path.join(__dirname, './src/frameworks/styleguide/ComponentsListRenderer.js'),
    ToolbarButton: path.join(__dirname, './src/frameworks/styleguide/ToolbarButton.js'),
  },

[bbr-yp]

@MrKou47 Have you done it?
I have the same issue... And I'm a little stuck :/

Your help would be greatly appreciated.

[MrKou47]

@bbr-yp aha, I used the React.createContext api to achieve switch components theme use global theme switch button.All of my components will be wrapped in a hoc component,and this component can get the theme prop form the window.location.query and update theme context. Then i customize component for switch global theme,just redirect website, like http://mycomponent.com?theme=light or http://mycomponent.com?theme=dark. You can try it😁