Compilation vs Rendering
- @mdx-js/react:
@mdx-js/react
provides the runtime environment for rendering MDX content within React applications. It allows for dynamic rendering of MDX files, supporting interactive components and real-time updates. - @mdx-js/mdx:
@mdx-js/mdx
is primarily focused on compiling MDX files into React components. It transforms MDX content during the build process, allowing for static generation of pages with embedded JSX.
Integration with Build Tools
- @mdx-js/react:
@mdx-js/react
is designed to work within React applications and does not handle file processing. It relies on the MDX content being pre-compiled or provided as a prop, making it complementary to build tools. - @mdx-js/mdx:
@mdx-js/mdx
integrates seamlessly with popular build tools like Webpack, Rollup, and Vite. It can be configured to process MDX files alongside other assets, making it versatile for various project setups.
Custom Component Support
- @mdx-js/react:
@mdx-js/react
excels in rendering MDX content with custom components. It provides a<MDXProvider>
component that allows you to easily override default HTML elements and integrate custom React components. - @mdx-js/mdx:
@mdx-js/mdx
allows for the use of custom components within MDX files, but the integration is primarily during the compilation phase. You need to define your components and pass them to the compiler.
Static vs Dynamic Content
- @mdx-js/react:
@mdx-js/react
supports both static and dynamic content. It can render MDX files that include interactive components, making it suitable for applications that require real-time interactivity. - @mdx-js/mdx:
@mdx-js/mdx
is ideal for static content generation. Once compiled, the MDX files produce static React components that can be rendered without any additional processing.
Ease of Use: Code Examples
- @mdx-js/react:
MDX Rendering Example
import { MDXProvider } from '@mdx-js/react'; import MyCustomComponent from './MyCustomComponent'; import mdxContent from './content.mdx'; const components = { h1: (props) => <h1 style={{ color: 'blue' }} {...props} />, // Override h1 CustomComponent: MyCustomComponent, // Custom component }; <MDXProvider components={components}> {mdxContent} </MDXProvider>;
- @mdx-js/mdx:
MDX Compilation Example
import { mdx } from '@mdx-js/react'; import { compile } from '@mdx-js/mdx'; const mdxSource = `# Hello, MDX\n\n<CustomComponent />`; const compiled = await compile(mdxSource); const Component = mdx(compiled); // Render the compiled MDX component <Component />;