MDX

Compiles and renders a string of MDX content. Note, a set of default remarkPlugins and rehypePlugins options are only used if both are not provided.

Security

This component evaluates JavaScript. Always sanitize user-provided content before passing it to the MDX component. This includes sanitizing value, components, and dependencies.

Failing to do so puts you at risk of a cross-site scripting (XSS) attack. See the MDX security documentation for more information.

Prefer the Markdown component if possible for rendering untrusted content as it does not evaluate JavaScript and is therefore safe by default.

Examples

  • Basic

    View Source

    Hello World

    import { MDX } from 'renoun/components'

export function Basic() {
  return <MDX># Hello World</MDX>
}

API Reference

MDXProps

MDXProps
Properties

children *

string

The MDX content to render.

components

MDXComponents

Additional components that will be available to use in the MDX content. The default components from renoun/mdx/components are used if not provided.

dependencies

Record<string, any>

An object of external dependencies that will be available to the MDX source code.

remarkPlugins

null | PluggableList

Remark plugins to use. See PluggableList for more info.

rehypePlugins

null | PluggableList

Rehype plugins to use. See PluggableList for more info.

baseUrl

string

Base URL to resolve imports and named exports from (e.g. import.meta.url)

MDX

({ children, components, dependencies, remarkPlugins: remarkPluginsProp, rehypePlugins: rehypePluginsProp, baseUrl, }: MDXProps) => Promise<React.JSX.Element>

Compiles and renders a string of MDX content. Note, a set of default remarkPlugins and rehypePlugins options are only used if both are not provided.

Parameters
MDXProps
Returns
Promise<Element>
Last updated