x0 icon indicating copy to clipboard operation
x0 copied to clipboard

_app.js: render function or Component, and MDX access to props

Open avaragado opened this issue 6 years ago • 2 comments

In the README, the Custom App section talks about using the render function to pass props to child routes.

In the equivalent page in the nicely formatted doc there's no mention of using this render function. It mentions using Component instead.

Which approach should we be using?

And also, the reason I went down this hole: I can use _app.js to pass props to child routes. I can access these props in JS files: they're provided to the React component exported from the file.

How do I access these props in MDX files?

avaragado avatar Jul 26 '18 11:07 avaragado

To expand on the second question. Consider this _app.js:

// _app.js

import React from 'react';

const App = props => {
    const { render } = props;

    return (
        <React.Fragment>
            {render({ foobar: 12345 })
        </React.Fragment>
    );
};

export default App;

And now this MDX file under the doc root:

import { Box } from 'rebass';

How do I access `foobar` here?

avaragado avatar Jul 26 '18 11:07 avaragado

Either render or Component should work, but Component is probably a simpler, more React-like approach. As for props to MDX components, that isn’t supported yet – was a feature in early MDX that got removed along the way, but I think it’s coming back

jxnblk avatar Jul 26 '18 12:07 jxnblk