React context for MDX.
This package is a context based components provider for combining React with MDX.
This package is not needed for MDX to work with React. See ¶ MDX provider in § Using MDX for when and how to use an MDX provider.
This package is ESM only:
Node 12+ is needed to use it and it must be import
ed instead of require
d.
npm:
npm install @mdx-js/react
yarn:
yarn add @mdx-js/react
import {MDXProvider} from '@mdx-js/react'
import Post from './post.mdx'
// ^-- Assumes an integration is used to compile MDX to JS, such as
// `@mdx-js/esbuild`, `@mdx-js/loader`, `@mdx-js/node-loader`, or
// `@mdx-js/rollup`, and that it is configured with
// `options.providerImportSource: '@mdx-js/react'`.
const components = {
em: props => <i {...props} />
}
<MDXProvider components={components}>
<Post />
</MDXProvider>
Note that you don’t have to use MDXProvider
and can pass components
directly:
-<MDXProvider components={components}>
- <Post />
-</MDXProvider>
+<Post components={components} />
See ¶ React in § Getting started for how to get started with MDX and React. See ¶ MDX provider in § Using MDX for how to use an MDX provider.
This package exports the following identifiers: MDXContext
, MDXProvider
,
useMDXComponents
, and withMDXComponents
.
There is no default export.
Provider for MDX context.
Configuration (Object
, optional).
Mapping of names for JSX components to React components
(Record<string, string|Component|Components>
, optional).
Turn off outer component context (boolean
, default: false
).
Children (JSX elements, optional).
JSX element.
Get current components from the MDX Context.
Additional components (Components
) to use or a function that takes the current
components and filters/merges/changes them ((currentComponents: Components) => Components
).
Components
.
🪦 Deprecated: This export is not recommended for use as it exposes internals which should be hidden. It might be removed in a future major release. Please use
useMDXComponents
to get context based components andMDXProvider
to set context based components instead.
The React Context for MDX (React.Context
).
🪦 Deprecated: This export is not recommended for use. It might be removed in a future major release. Please use
useMDXComponents
to get context based components instead.
Create a HOC of Components
which is given the current context based MDX
components.
This package is fully typed with TypeScript.
To enable types for imported .mdx
, .md
, etcetera files, you should make sure
the TypeScript JSX
namespace is typed.
This is done by installing and using the types of your framework, such as
@types/react
.
Then you can install and use
@types/mdx
,
which adds types to import statements of supported files.
See § Security on our website for information.
See § Contribute on our website for ways to get started. See § Support for ways to get help.
This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.