@mdx-js/runtime

Parse and render MDX in a runtime environment.

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

Installation

npm:

npm i -S @mdx-js/runtime

Usage

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 MDX from '@mdx-js/runtime'

// Provide custom components for markdown elements
const components = {
  h1: props => <h1 style={{color: 'tomato'}} {...props} />,
  Demo: props => <h1>This is a demo component</h1>
}

// Provide variables that might be referenced by JSX
const scope = {
  some: 'value'
}

const mdx = `
# Hello, world!

<Demo />

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

export default () => (
  <MDX components={components} scope={scope}>
    {mdx}
  </MDX>
)

Contribute

See the Support and Contributing guidelines on the MDX website for ways to (get) help.

This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Compositor and Vercel