Runtime

@mdx-js/runtime

A React component that evaluates MDX.

⚠️ warning: this is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes. It must not be used with user input that isn’t sandboxed.

Install

npm:

npm install @mdx-js/runtime

yarn:

yarn add @mdx-js/runtime

Use

Say we have the following scripts, example.jsx:

Props

The MDX Runtime component accepts two props:

Example code

import React from 'react'
import {renderToString} from 'react-dom/server'
import MDX from '@mdx-js/runtime'

// Custom components:
const components = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
  Demo: () => <p>This is a demo component</p>
}

// Data available in MDX:
const scope = {
  somethingInScope: 1
}

// The MDX:
const children = `
# Hello, world!

{1 + somethingInScope}

<Demo />

<div>Here is the scope variable: {some}</div>
`

const result = renderToString(
  <MDX components={components} scope={scope} children={children} />
)

console.log(result)

Now, building, bundling, and finally running it, yields:

<h1 style="color:tomato">Hello, world!</h1>
2
<p>This is a demo component</p>

Contribute

See Contributing on mdxjs.com for ways to get started. See Support for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Compositor and Vercel