unified

Project: mdx-js/mdx

Package: @mdx-js/react@1.6.22

  1. Dependencies: 0·Dependents: 776
  2. React implementation for MDX
  1. remark 193
  2. markdown 135
  3. mdx 27
  4. jsx 17
  5. react 15
  6. mdxast 6

@mdx-js/react

Build Downloads Sponsors Backers Chat

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.

License

MIT © Compositor and Vercel