Mdx: Passing props to a custom code block

[alanbsmith]

Hey there!

I finally got to dig into this lib this weekend, and it's amazing! I really love how it's designed. Thanks for creating and maintaining it. 😄

I looked through the open and closed issues and saw some related topics, but not anything identical. But I apologize if this is a repeat issue I missed.

I'm wondering if it's possible pass props to a custom code block component. I'm using this lib with react-live which is great for making my code blocks editable.

I was thinking it would be nice to have an API similar to react-styleguidist

`jsx jsx { props: { code: code, scope: { Button, styled } }
Hello, World!

````



Currently, I'm achieving this with the following:

* Passing a custom Demo component to the MDX component:

```jsx
<MDX components={{ code: Demo }} />

```jsx
// Demo.js
...
class Demo extends Component {
render() {
return (




)
}
}
...

* Creating a separate raw file for my code examples:

```jsx
function Button(props) {
  return  <button>{props.children}<button>;
}

render(<Button />)

• And then importing it into my .md file:

import styled from 'styled-components';
import Button from './Button';
import code from './Demo/Button.example';
import Demo from './Demo';

# Button

## Description

This is our general-purpose Button component.

## Demo

<Demo code={code} scope={{styled, Button}} />

And that's fine, but it's a lot of steps. If there's a way to currently do this, that would be great! If not, I'd be happy to work on it if that's something you'd like to support. I reviewed the source code, but I didn't see anything immediately pop out at me for where to add that logic. But I only started looking this weekend. If you can tell me where to start, I'd be happy to take that on. 😄

I know you're really busy, so thanks for your time and feedback! And thanks again for this lib!

[johno]

One approach I've been using for a project is frontmatter inside code blocks:

---
responsive: true
---

<Box>Hello!</Box>

This can then be handled by your Code/Demo component. You can see how we handle it in x0 here. This doesn't do frontmatter parsing (that's on a closed source project), but shows how you "overload" the code block in different ways.

[alanbsmith]

Thanks for your response, @johno! I'll give that a shot. I think @ChristopherBiscardi found a good solution for integrating React Live as well here: https://github.com/ChristopherBiscardi/sens8

Thank you again for maintaining this lib. It's so great. 🏆👏