3

Currently, Styleguidist uses ReactExample to render components. I want to wrap all the ReactExample components in a page with my custom theme provider. As you see below, all the ReactExample components fall outside of the root Styleguide Component.

 <StyleGuide />
 <ReactExample />
 <ReactExample />
 <ReactExample />

Is there a way for me to configure or modify styleguidist to add a parent component that will wrap all the components of styleguidist?

<ThemeProvider>
  <StyleGuide />
  <ReactExample />
  <ReactExample />
  <ReactExample />
</ThemeProvider>
Jagadeesh Avvaru
  • 31
  • 3

1 Answers1

1

You can wrap all components like this:

in styleguide.config.js:

const path = require('path')
module.exports = {
  styleguideComponents: {
    Wrapper: path.join(__dirname, 'src/styleguide/Wrapper')
  }
}

components/Wrapper:

import React, { Component } from 'react'
import { IntlProvider } from 'react-intl'
export default class Wrapper extends Component {
  render() {
    return (
      <IntlProvider locale="en">{this.props.children}</IntlProvider>
    )
  }
}

See: https://github.com/styleguidist/react-styleguidist/blob/master/docs/Cookbook.md#how-to-change-the-layout-of-a-style-guide

Capuchin
  • 3,465
  • 6
  • 28
  • 40
  • Comment section didn't allow me to post text more than 250 characters. so I explained my question and posted it as an answer. let me know if you have any suggestions – Jagadeesh Avvaru Sep 23 '20 at 20:49
  • Currently, i am doing the same way @thevangelist. But my usecase is bit different. If you navigate to the URL here - https://react-styleguidist.js.org/examples/basic/ , you would see list of examples in React styleguidist. Open the developer tools and if you have the extension - React Developer Tools, you would see a tab called 'Components' and you can see how the components are rendered. So, I want to wrap all of the components of the StyleGuidist with my custom theme provider. – Jagadeesh Avvaru Sep 25 '20 at 17:48
  • I don't want to have a theme provider as a wrapper for each example in the styleGuidist instead I want to use single theme provider as a wrapper for all the examples. End goal of my issue to get something like below, so that I can use theme colors in all of my examples. ```jsx ``` Is there any way we can do this using Styleguidist or using build process? – Jagadeesh Avvaru Sep 25 '20 at 17:48