@mdx-js/react
![Chat](https://img.shields.io/badge/chat-discussions-success.svg)
React context for MDX.
Contents
What is this?
This package is a context based components provider for combining React with
MDX.
When should I use this?
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.
Install
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
Use
import {MDXProvider} from '@mdx-js/react'
import Post from './post.mdx'
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.
API
This package exports the following identifiers: MDXContext
, MDXProvider
,
useMDXComponents
, and withMDXComponents
.
There is no default export.
MDXProvider(props?)
Provider for MDX context.
props
Configuration (Object
, optional).
props.components
Mapping of names for JSX components to React components
(Record<string, string|Component|Components>
, optional).
props.disableParentContext
Turn off outer component context (boolean
, default: false
).
props.children
Children (JSX elements, optional).
Returns
JSX element.
useMDXComponents(components?)
Get current components from the MDX Context.
components
Additional components (Components
) to use or a function that takes the current
components and filters/merges/changes them ((currentComponents: Components) => Components
).
Returns
Components
.
MDXContext
🪦 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 and
MDXProvider
to set context based components instead.
The React Context for MDX (React.Context
).
withMDXComponents(Component)
🪦 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.
Types
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.
Security
See § Security on our website for information.
Contribute
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.
License
MIT © Compositor and Vercel