esbuild-mdx

esbuild-mdx resolves .md and .mdx-delimited files as markdown components you can render in your React components.

• Add dependencies:

  yarn add react react-dom
  yarn add --dev @mdx-js/react esbuild-mdx

• Create esbuild.js:

  require("esbuild").build({
  	// ...
  	plugins: [require("esbuild-mdx")()],
  	// ...
  })

• Create a .md or .mdx-delimited file:

  # Hello, world rendered by `esbuild-mdx`!

• Import your .md or .mdx file and render as a React component:

  import React from "react"
  import ReactDOM from "react-dom"
  
  import MarkdownComponent from "./example.md"
  
  function App() {
  	return (
  		<div>
  			<h1>
  				Hello, world rendered by <code>React</code>!
  			</h1>
  			<MarkdownComponent />
  		</div>
  	)
  }
  
  ReactDOM.render(<App />, document.getElementById("root"))

See esbuild-mdx-example for a reference implementation.

Note: react, react-dom, and @mdx-js/react are peer dependencies.

License

Licensed as MIT open source.