question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No way to know if a component is JSX or MDX in MDXProvider

See original GitHub issue

Version 1.0 includes a change:

The pragma implementation will also cause JSX HTML elements to be rendered with the component mapping passed to MDXProvider.

It seems to be difficult (or impossible?) to opt-out of this behavior and render the JSX differently than the MDX equivalent of that HTML tag.

A real example of how this would be helpful

I’m building out this page in MDX:

image

The legend, in particular, looks like this:

image

I’ve built the legend in the MDX file with:

<ul className="...">
    <li className="">...</li>
    <li className="">...</li>
    <li className="">...</li>
    <li className="">...</li>
</ul>

I want the <ul> and <li>s to look different than a <ul> created with:

* This `<ul>`
* should render with
* three bullet points

When I use custom components in MDXProvider, there seems to be no way to distinguish between a ul created with JSX and a ul created with MDX:

<MDXProvider
    components={{
        ul: (props) => {
           // How can I tell if this started as JSX or MDX? If it's JSX, I'd like to
           // return early and just do `<ul {...props} />`.
        },
    }}
>
    {children}
</MDXProvider>

Your environment

  • @mdx-js/mdx@1.0.15, @mdx-js/react@1.0.15, and gatsby-mdx@0.6.3.

Steps to reproduce

N/A

(Happy to make one if the issue needs clarification.)

Expected behaviour

N/A

Actual behaviour

N/A


I hope this question made sense. I’m having trouble phrasing it but am happy to elaborate more if it’s confusing. Thanks for all the work you all have done! 🙇

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (6 by maintainers)

github_iconTop GitHub Comments

2reactions
johnocommented, Jul 31, 2019

Yeah, this is something that we need to be able to solve so I’m going to leave this open while I ponder the best solution or at least better document things.

It’s definitely been a source of confusion where some folks expect HTML to maintain the same styles/component rendering as their Markdown equivalent while others don’t. 🤷‍♂

0reactions
wooormcommented, Nov 13, 2020

As I believe https://github.com/mdx-js/mdx/issues/821 solves this, and is closed and in MDX@2, I’ll close this here too

Read more comments on GitHub >

github_iconTop Results From Across the Web

Using MDX
This article explains how to use MDX files in your project. It shows how you can pass props and how to import, define,...
Read more >
Any attempt to access props in MDX component results ...
I've tried wrapping the render in a MDX provider, in a conditional statement that checks for the specific props first, but nothing works....
Read more >
MDX and React
To define any custom component within an MDX file, you have to export it: only paragraphs that start with export will be parsed...
Read more >
gatsby-plugin-mdx
If you want to allow usage of a component from anywhere (often referred to as a shortcode), you can pass it to the...
Read more >
How to embed React components in markdown using Gatsby ...
Welcome to the first post of the series. In this post, you will learn how to use MDXRenderer and MDXProvider to embed JSX/React...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found