1 | # `@mdx-js/runtime`
|
2 |
|
3 | [![Build Status][build-badge]][build]
|
4 | [![lerna][lerna-badge]][lerna]
|
5 | [![Join the community on Spectrum][spectrum-badge]][spectrum]
|
6 |
|
7 | Parse and render [MDX][] in a runtime environment.
|
8 |
|
9 | > :warning: **warning**: this is not the preferred way to use MDX since it
|
10 | > introduces a substantial amount of overhead and dramatically increases
|
11 | > bundle sizes.
|
12 | > It should also not be used with user input that isn’t sandboxed.
|
13 |
|
14 | ## Installation
|
15 |
|
16 | [npm][]:
|
17 |
|
18 | ```sh
|
19 | npm i -S @mdx-js/runtime
|
20 | ```
|
21 |
|
22 | ## Usage
|
23 |
|
24 | ```jsx
|
25 | import React from 'react'
|
26 | import MDX from '@mdx-js/runtime'
|
27 |
|
28 | // Provide custom components for markdown elements
|
29 | const components = {
|
30 | h1: props => <h1 style={{color: 'tomato'}} {...props} />,
|
31 | Demo: props => <h1>This is a demo component</h1>
|
32 | }
|
33 |
|
34 | // Provide variables that might be referenced by JSX
|
35 | const scope = {
|
36 | some: 'value'
|
37 | }
|
38 |
|
39 | const mdx = `
|
40 | # Hello, world!
|
41 |
|
42 | <Demo />
|
43 | `
|
44 |
|
45 | export default () => (
|
46 | <MDX components={components} scope={scope}>
|
47 | {mdx}
|
48 | </MDX>
|
49 | )
|
50 | ```
|
51 |
|
52 | ## Contribute
|
53 |
|
54 | See the [Support][] and [Contributing][] guidelines on the MDX website for ways
|
55 | to (get) help.
|
56 |
|
57 | This project has a [Code of Conduct][coc].
|
58 | By interacting with this repository, organisation, or community you agree to
|
59 | abide by its terms.
|
60 |
|
61 | ## License
|
62 |
|
63 | [MIT][] © [Compositor][] and [ZEIT][]
|
64 |
|
65 |
|
66 |
|
67 | [build]: https://travis-ci.com/mdx-js/mdx
|
68 | [build-badge]: https://travis-ci.com/mdx-js/mdx.svg?branch=master
|
69 | [lerna]: https://lernajs.io/
|
70 | [lerna-badge]: https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg
|
71 | [spectrum]: https://spectrum.chat/mdx
|
72 | [spectrum-badge]: https://withspectrum.github.io/badge/badge.svg
|
73 | [contributing]: https://mdxjs.com/contributing
|
74 | [support]: https://mdxjs.com/support
|
75 | [coc]: https://github.com/mdx-js/.github/blob/master/code-of-conduct.md
|
76 | [mit]: license
|
77 | [compositor]: https://compositor.io
|
78 | [zeit]: https://zeit.co
|
79 | [mdx]: https://github.com/mdx-js/mdx
|
80 | [npm]: https://docs.npmjs.com/cli/install
|