@mdx-js/react
v3.1.0
Published
React context for MDX
Downloads
25,716,100
Readme
@mdx-js/react
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.
If you use Next.js, do not use this.
Add an mdx-components.tsx
(in src/
or /
) file instead.
See Configuring MDX on nextjs.org
for more info.
Install
This package is ESM only. In Node.js (version 16+), install with npm:
npm install @mdx-js/react
In Deno with esm.sh
:
import {MDXProvider} from 'https://esm.sh/@mdx-js/react@3'
In browsers with esm.sh
:
<script type="module">
import {MDXProvider} from 'https://esm.sh/@mdx-js/react@3?bundle'
</script>
Use
/**
* @import {MDXComponents} from 'mdx/types.js'
*/
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'`.
/** @type {MDXComponents} */
const components = {
em(properties) {
return <i {...properties} />
}
}
console.log(
<MDXProvider components={components}>
<Post />
</MDXProvider>
)
👉 Note: 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 identifiers MDXProvider
and
useMDXComponents
.
There is no default export.
MDXProvider(properties?)
Provider for MDX context.
Parameters
properties
(Props
) — configuration
Returns
Element (JSX.Element
).
useMDXComponents(components?)
Get current components from the MDX Context.
Parameters
components
(MDXComponents
frommdx/types.js
orMergeComponents
, optional) — additional components to use or a function that creates them
Returns
Current components (MDXComponents
from
mdx/types.js
).
MergeComponents
Custom merge function (TypeScript type).
Parameters
components
(MDXComponents
frommdx/types.js
) — current components from the context
Returns
Additional components (MDXComponents
from
mdx/types.js
).
Props
Configuration for MDXProvider
(TypeScript type).
Fields
children
(ReactNode
fromreact
, optional) — childrencomponents
(MDXComponents
frommdx/types.js
orMergeComponents
, optional) — additional components to use or a function that creates themdisableParentContext
(boolean
, default:false
) — turn off outer component context
Types
This package is fully typed with TypeScript.
It exports the additional types MergeComponents
and
Props
.
For types to work, make sure the TypeScript JSX
namespace is typed.
This is done by installing and using the types of your framework, as in
@types/react
.
Compatibility
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, @mdx-js/react@^3
,
compatible with Node.js 16.
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.