mdx.macro
A babel macro for converting mdx into components, using the @mdx-js/mdx package.
Installation
Just install mdx.macro
. It includes @mdx-js/mdx and @mdx-js/tag as dependencies.
npm install mdx.macro --save
Usage
You have three options for importing your MDX:
- Dynamic import:
importMDX('./document.mdx')
- Synchronous import:
importMDX.sync('./document.mdx')
- The
mdx
tag:mdx`Create a **component** from a template literal`
Dynamic import
Returns a promise to a component, which can be used with React.lazy()
const MyDocument = React ReactDOM
Works by creating a temporary file under your project's node_modules/.cache/mdx.macro
directory, and importing that.
const promiseToMyDocument = ↓ ↓ ↓ ↓ ↓ ↓ const promiseToMyDocument = import'.cache/mdx.macro/my-document.hash1234.mdx.js'
Synchronous import
Returns a component that can be used directly.
const MyDocument = importMDX ReactDOM
Works by creating a temporary file under your project's node_modules/.cache/mdx.macro
directory, and importing that.
const MyDocument = importMDX ↓ ↓ ↓ ↓ ↓ ↓ const MyDocument = _MyDocument
Tagged Template Literals
Replaces an mdx
tagged template literal with a document component. It also adds an import
for MDXTag
, but doesn't add an import for React
.
const MyDocument = mdx`# Don't Panic Since we decided a few weeks ago to adopt the leaf as legal tender, we have, of course, all become immensely rich.` ↓ ↓ ↓ ↓ ↓ ↓ const MyDocument = <MDXTag name="wrapper" components=components> <MDXTag name="h1" components=components>`Don't Panic`</MDXTag> <MDXTag name="p" components=components> <MDXTag name="em" components=components parentName="p" >`Since we decided a few weeks ago to adopt the leaf as legal tender, we have, of course, all become immensely rich.`</MDXTag> </MDXTag> </MDXTag>
Caveats
Currently, changes to imported files aren't detected, even within create-react-app. Any PR that fixes this would be welcome!
License
MIT