@mdx-js/react

[]build []lerna []chat

Map components to HTML elements based on the Markdown syntax. Serves as the React implementation for MDX.

Installation

npm:

npm install --save @mdx-js/react

Usage

<!-- helloworld.md -->

# Hello, World!

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

import HelloWorld from './helloworld.md'

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

console.log(
  renderToString(
    <MDXProvider components={{h1: H1}}>
      <HelloWorld />
    </MDXProvider>
  )
)

Yields:

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

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