@mdx-js/runtime

@mdx-js/runtime

A React component that evaluates MDX.

:warning: 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:

Name	Description
components	Globally available components for the runtime
scope	Variables that are accessible in the JSX portion of the document
remarkPlugins	Array of remark plugins

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