@mdx-js/runtime

1.6.22 • Public • Published

@mdx-js/runtime

Build Status lerna Chat

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

Package Sidebar

Install

npm i @mdx-js/runtime

Homepage

mdxjs.com

Weekly Downloads

12,689

Version

1.6.22

License

MIT

Unpacked Size

17.1 kB

Total Files

5

Last publish

Collaborators

  • remcohaszing
  • johno
  • timneutkens
  • wooorm