option to disable div wrapper (but keep all inside Component)

[11111000000]

import { Social } from 'modules/buttons'

<footer className="my-footer"></footer>

i.e. I want <footer></footer> , not <div><footer></footer></div>

[11111000000]

Or to add external wrapper only when top level inner divs more than one? (React restriction)

[11111000000]

any suggestions?

[jamesknelson]

You should be able to achieve this by setting the wrapper factory. For example, this will make the component render using an array wrapper instead of a div wrapper:

<MyMDXComponent factories={{
  wrapper: (props, ...children) => children
}} />

You can see how this works by looking at the generated JS:

import React, { createElement, createFactory } from 'react'

export default function({ factories={} }) {
  const {
    wrapper = createFactory('div'),
  } = factories

  return wrapper({},

createElement("footer", { className: "my-footer" })

  )
}

[11111000000]

thanks! Want this example in documentation! And how to configure that as default behavior in webpack loader? (all our components have wrapper already)

[11111000000]

And React 16 allow arrays returns...

[jamesknelson]

I don't think there is currently a way to configure default factories via the webpack loader (or at all, really).

This is something that has come up before. I'm going to re-open this one, but don't have time to work on it at the moment. If you have a good solution, I'd be happy to merge it.

[simonlc]

I was getting an error about keys so I changed this:

<MyMDXComponent factories={{
  wrapper: (props, ...children) => children
}} />

To this:

<MyMDXComponent factories={{
  wrapper: (props, ...children) => React.Children.toArray(children),
}} />

[jamesknelson]

Closing this issue as I've deprecated mdxc in favor of https://github.com/mdx-js/mdx