https://github.com/zaydek/esbuild-mdx

esbuild plugin for rendering markdown as React components
https://github.com/zaydek/esbuild-mdx

Last synced: 3 months ago
JSON representation

esbuild plugin for rendering markdown as React components

• Host: GitHub
• URL: https://github.com/zaydek/esbuild-mdx
• Owner: zaydek
• License: mit
• Created: 2020-12-22T13:56:58.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2021-02-02T02:37:01.000Z (almost 4 years ago)
• Last Synced: 2024-07-29T12:38:28.330Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 46.9 KB
• Stars: 13
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-esbuild - esbuild-mdx - delimited files as React components. (Plugins)

README

        
# esbuild-mdx

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

- Add dependencies:

  ```sh

  yarn add react react-dom

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

  ```

- Create [`esbuild.js`](https://github.com/zaydek/esbuild-mdx-example/blob/master/esbuild.js):

  ```js

  require("esbuild").build({

  	// ...

  	plugins: [require("esbuild-mdx")()],

  	// ...

  })

  ```

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

  ```md

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

  ```

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

  ```jsx

  import React from "react"

  import ReactDOM from "react-dom"

  import MarkdownComponent from "./example.md"

  function App() {

  	return (

  		


  			


  				Hello, world rendered by React!

  			

  			

  		

  	)

  }


  ReactDOM.render(, document.getElementById("root"))

  ```

See [esbuild-mdx-example](https://github.com/zaydek/esbuild-mdx-example) for a reference implementation.

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

## License

Licensed as MIT open source.