@mdx-js/react 's direct dependencies. Data on all dependencies, including transitive ones, is available via CSV download.| Name | Version | Size | License | Type | Vulnerabilities |
|---|---|---|---|---|---|
| @types/mdx | 2.0.12 | 9.56 kB | MIT | prod | |
| @types/react | 18.2.73 | 420.91 kB | MIT | prod | |
| react | 18.2.0 | 79.25 kB | MIT | prod peer |
The @mdx-js/react is a context-based components provider that combines React with MDX. MDX is a format that lets you seamlessly use JSX within your markdown documents. With @mdx-js/react, you can use components from the MDX context in your React applications. This package does not provide a default export, but exports several identifiers including MDXContext, MDXProvider, useMDXComponents, and withMDXComponents.
@mdx-js/react is used in conjunction with an MDX compiler to integrate MDX-compiled JavaScript components into a React application. Here is an example of usage:
import {MDXProvider} from '@mdx-js/react'
import Post from './post.mdx'
// The MDX file is assumed to be compiled using an integration like @mdx-js/esbuild, @mdx-js/loader, @mdx-js/node-loader, or @mdx-js/rollup.
// The compiler must do be configured with options.providerImportSource set to '@mdx-js/react'.
const components = {
em: props => <i {...props} />
}
<MDXProvider components={components}>
<Post />
</MDXProvider>
You can also pass components directly:
import Post from './post.mdx'
const components = {
em: props => <i {...props} />
}
<Post components={components} />
The @mdx-js/react package documentation is available within the package's readme content on GitHub here. This information covers essential technical aspects like the API exports, usage examples, type integration, and more.
