@mdx-js/tag

A fully-featured Markdown/MDX React component for ambitious projects

Usage no npm install needed!

<script type="module">
  import mdxJsTag from 'https://cdn.skypack.dev/@mdx-js/tag';
</script>

README

@mdx-js/tag

Build Status lerna Join the community on Spectrum

Map components to HTML elements based on the Markdown syntax. Useful with MDX.

Installation

npm:

npm i -S @mdx-js/tag

Usage

import React from 'react'
import {renderToString} from 'react-dom/server'
import {MDXTag} from '@mdx/tag'

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

console.log(renderToString(<MDXTag name="h1" children="Hello, world!" />))
console.log(renderToString(<MDXTag name="h1" components={{h1: H1}} children="Hello, world!" />))

Yields:

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

Contribute

See contributing.md in mdx-js/mdx for ways to get started.

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

License

MIT © Compositor and ZEIT