@mdx-js/preact
Preact context for MDX.
Contents
What is this?
This package is a context based components provider for combining Preact with
MDX.
When should I use this?
This package is not needed for MDX to work with Preact.
See ¶ MDX provider in § Using MDX for when and how to use an MDX
provider.
Install
This package is ESM only.
In Node.js (version 16+), install with npm:
npm install @mdx-js/preact
In Deno with esm.sh
:
import {MDXProvider} from 'https://esm.sh/@mdx-js/preact@3'
In browsers with esm.sh
:
<script type="module">
import {MDXProvider} from 'https://esm.sh/@mdx-js/preact@3?bundle'
</script>
Use
/**
* @import {MDXComponents} from 'mdx/types.js'
*/
import {MDXProvider} from '@mdx-js/preact'
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/preact'`.
/** @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 ¶ Preact in § Getting started for how to get started with
MDX and Preact.
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
Returns
Current components (MDXComponents
from
mdx/types.js
).
MergeComponents
Custom merge function (TypeScript type).
Parameters
Returns
Additional components (MDXComponents
from
mdx/types.js
).
Props
Configuration for MDXProvider
(TypeScript type).
Fields
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
preact
.
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/preact@^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.
License
MIT © Compositor and Vercel