@mdx-js/react

!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
React context for MDX.

Contents

• What is this?
• When should I use this?
• Install
• Use
• API

MDXProvider(properties?) useMDXComponents(components?) MergeComponents Props

• Types
• Compatibility
• Security
• Contribute
• License

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 MDXuse-provider 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.orgnext-configuring-mdx for more info.

Install

This package is ESM onlyesm. In Node.js (version 16+), install with npm:

npm install @mdx-js/react

In Deno with esm.shesmsh:

import {MDXProvider} from 'https://esm.sh/@mdx-js/react@3'

In browsers with esm.shesmsh:

<script type="module">
  import {MDXProvider} from 'https://esm.sh/@mdx-js/react@3?bundle'
</script>

Use

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 {import('mdx/types.js').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 startedstart-react for how to get started with MDX and React. See ¶ MDX provider in § Using MDXuse-provider for how to use an MDX provider.

API

This package exports the identifiers MDXProviderapi-mdx-provider and useMDXComponentsapi-use-mdx-components. There is no default export.

MDXProvider(properties?)

Provider for MDX context.

Parameters

• properties (Propsapi-props)

— configuration

Returns

Element (JSX.Element).

useMDXComponents(components?)

Get current components from the MDX Context.

Parameters

• components (MDXComponents from mdx/types.jsmdx-types-components

or MergeComponentsapi-merge-components, optional) — additional components to use or a function that creates them

Returns

Current components (MDXComponents from mdx/types.jsmdx-types-components).

MergeComponents

Custom merge function (TypeScript type).

Parameters

• components (MDXComponents from mdx/types.jsmdx-types-components)

— current components from the context

Returns

Additional components (MDXComponents from mdx/types.jsmdx-types-components).

Props

Configuration for MDXProvider (TypeScript type).

Fields

• children (ReactNode from reactreact-node,

optional) — children

• components (MDXComponents from mdx/types.jsmdx-types-components

or MergeComponentsapi-merge-components, optional) — additional components to use or a function that creates them

• disableParentContext (boolean, default: false)

— turn off outer component context

Types

This package is fully typed with TypeScript. It exports the additional types MergeComponentsapi-merge-components and Propsapi-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 § Securitysecurity on our website for information.

Contribute

See § Contributecontribute on our website for ways to get started. See § Supportsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

MIT © Compositor and Vercel