1 | # `@mdx-js/react`
|
2 |
|
3 | [![Build Status][build-badge]][build]
|
4 | [![lerna][lerna-badge]][lerna]
|
5 | [![Join the community on Spectrum][spectrum-badge]][spectrum]
|
6 |
|
7 | Map components to HTML elements based on the Markdown syntax.
|
8 | Serves as the React implementation for [MDX][].
|
9 |
|
10 | ## Installation
|
11 |
|
12 | [npm][]:
|
13 |
|
14 | ```sh
|
15 | npm install --save @mdx-js/react
|
16 | ```
|
17 |
|
18 | ## Usage
|
19 |
|
20 | ```md
|
21 | <!-- helloworld.md -->
|
22 |
|
23 | # Hello, World!
|
24 | ```
|
25 |
|
26 | ```jsx
|
27 | import React from 'react'
|
28 | import {MDXProvider} from '@mdx-js/react'
|
29 | import {renderToString} from 'react-dom/server'
|
30 |
|
31 | import HelloWorld from './helloworld.md'
|
32 |
|
33 | const H1 = props => <h1 style={{color: 'tomato'}} {...props} />
|
34 |
|
35 | console.log(
|
36 | renderToString(
|
37 | <MDXProvider components={{h1: H1}}>
|
38 | <HelloWorld />
|
39 | </MDXProvider>
|
40 | )
|
41 | )
|
42 | ```
|
43 |
|
44 | Yields:
|
45 |
|
46 | ```html
|
47 | <h1 style="color:tomato">Hello, world!</h1>
|
48 | ```
|
49 |
|
50 | ## Contribute
|
51 |
|
52 | See the [Support][] and [Contributing][] guidelines on the MDX website for ways
|
53 | to (get) help.
|
54 |
|
55 | This project has a [Code of Conduct][coc].
|
56 | By interacting with this repository, organisation, or community you agree to
|
57 | abide by its terms.
|
58 |
|
59 | ## License
|
60 |
|
61 | [MIT][] © [Compositor][] and [Vercel][]
|
62 |
|
63 |
|
64 |
|
65 | [build]: https://travis-ci.com/mdx-js/mdx
|
66 | [build-badge]: https://travis-ci.com/mdx-js/mdx.svg?branch=master
|
67 | [lerna]: https://lernajs.io/
|
68 | [lerna-badge]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
|
69 | [spectrum]: https://spectrum.chat/mdx
|
70 | [spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
|
71 | [contributing]: https://mdxjs.com/contributing
|
72 | [support]: https://mdxjs.com/support
|
73 | [coc]: https://github.com/mdx-js/.github/blob/master/code-of-conduct.md
|
74 | [mit]: license
|
75 | [compositor]: https://compositor.io
|
76 | [vercel]: https://vercel.com
|
77 | [mdx]: https://github.com/mdx-js/mdx
|
78 | [npm]: https://docs.npmjs.com/cli/install
|