Package Exports

@mdx-js/react

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@mdx-js/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

`@mdx-js/react`

React renderer for MDX: JSX in Markdown.

Install

npm:

npm install @mdx-js/react

yarn:

yarn add @mdx-js/react

Use

Say we have the following code in example.mdx:

# Hello, world! {1 + 1}

And our script, example.jsx:

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

import Example from './example.mdx'

const h1 = props => <h1 style={{color: 'tomato'}} {...props} />

console.log(
  renderToString(
    <MDXProvider components={{h1}}>
      <Example />
    </MDXProvider>
  )
)

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

<h1 style="color:tomato">Hello, world! 2</h1>

Note that you must configure whatever you use to load .mdx files to use mdx from @mdx-js/react. The webpack loader does this automatically.

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.

@mdx-js/react