Docz: Per-file wrapper components

Created on 10 Sep 2018 · 3Comments · Source: doczjs/docz

It'd be awesome if aside from the root wrapper I could create one at a file level. I have a mono-repo where I may have one file that I want to wrap in a Provider with one store and another where I wish to use another store and it'd be convenient to be able to make a project level wrapper that sets up anything I know all the packages need and then be able to point to a wrapper for that file by adding to the top-matter like this?

// Option A
import Wrapper from './path/to/wrapper';
---
name: Page
menu: Some Menu
route: /page
wrapper: Wrapper
---

// Option B
---
name: Page
menu: Some Menu
route: /page
wrapper: './path/to/wrapper'
---

Source

wldcordeiro

Most helpful comment

But this wrapper won't be shown as part of your playground @wldcordeiro, this wrapper will be wrapped in the <div> around your document. In docz we have 3 ways to wrap things:

Using wrapper property on doczrc, that will wrap your entire application.
By exporting default some component, that will wrap your document.
By wrapping children of playground, that will wrap the code of your playground.

Just the last one will show the code on your playground!

pedronauck on 11 Sep 2018

🎉3 👍3

All 3 comments

You can wrap your document by exporting a default component like that:

---
name: Page
menu: Some Menu
route: /page
---

import Wrapper from './path/to/wrapper'

export default (props) => (
  <Wrapper {...props} />
)

pedronauck on 10 Sep 2018

That isn't what I want to do though because then if I use the playground it shows up as part of my example code. You just close the issue and answer like I don't know common JS imports.

wldcordeiro on 11 Sep 2018

But this wrapper won't be shown as part of your playground @wldcordeiro, this wrapper will be wrapped in the <div> around your document. In docz we have 3 ways to wrap things: