How to render two components inside a .md file for styleguidist in React?

Question

I am trying to create a styleguide with custom components. I need to be able to insert components inside of each other and not sure how to do that inside of the .md file. I have a list and list items. I want to display the list items inside of the list. Getting this error in the styleguidist display. Here are some good examples but none that illustrate what I am trying to accomplish -- https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components

SyntaxError: Unexpected token (3:0) 1 : import ListItem from './ListItem' 2 : 3 :

List.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class List extends Component<IListProps> {
      render() {
        const { children } = this.props
        return <ul className={'mtm-list'}>{children}</ul>
      }
    }

    export default List

List.md


    ```js
    import ListItem from './ListItem'

    <List>
       <ListItem> 
           Content in a List
       </ListItem>
    </List>

ListItem.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListItemProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class ListItem extends Component<IListItemProps> {
      render() {
        const { children } = this.props
        return <li className={'mtm-list-item'}>{children}</li>
      }
    }

    export default ListItem

Are you trying to run javascript stored in a markdown file? I'm not sure you'll find an easy solution to do so. I suggest rendering your content naturally as HTML and then using an HTML to markdown converter. — FThompson, Nov 17 '19 at 17:46
I recommend trying out .mdx file types (think .jsx in an markdown file) - https://github.com/mdx-js/mdx — Dom, Nov 17 '19 at 18:35
Updated my post. Added a reference for the reason as to why I'm using md files. — userlkjsflkdsvm, Nov 17 '19 at 23:07

score 3 · Answer 1 · answered Nov 17 '19 at 23:38

3

Maybe MDX helpful.

"MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents"

yarn add mdx.macro

rename List.md to List.mdx and now you can something like this

    import ListItem from './ListItem'
#Header
    <List>
       <ListItem> 
           *content*
       </ListItem>
    </List>

answered Nov 17 '19 at 23:38

omega-nitro-zeus-x0

479
3
8

Unfortunately, this isn't compatible with Styleguidist – userlkjsflkdsvm Nov 18 '19 at 13:37

userlkjsflkdsvm · Accepted Answer · 2019-11-18T16:24:25.420

3

I had to change the .md to this format and it worked, specifically adding the semicolon.

```jsx
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
  <Placeholder />
</Button>
```

edited Nov 18 '19 at 16:24

answered Nov 18 '19 at 15:10

userlkjsflkdsvm

961
1
21
53

Yes you need semicolon. – Capuchin Jan 08 '20 at 07:53

How to render two components inside a .md file for styleguidist in React?

2 Answers2