MDXContent

Security

Always sanitize user-provided content before passing it to MDXContent. 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.

Examples

  • Basic

    View Source

    Hello World

    import React from 'react'
import { MDXContent } from 'renoun/components'

export function Basic() {
  return <MDXContent value="# Hello World" />
}

API Reference

MDXContent

({ value, components, dependencies, remarkPlugins, rehypePlugins, baseUrl, }: { value: string; components?: MDXComponents; dependencies?: Record<string, any>; remarkPlugins?: CompileOptions["remarkPlugins"]; rehypePlugins?: CompileOptions["rehypePlugins"]; baseUrl?: string; }) => Promise<React.JSX.Element>

Compiles and renders a string of MDX content.

Parameters

Properties

value *

string

The MDX content to render.

components

RenounComponentsType | undefined

Additional components to use or a function that creates them.

dependencies

Record<string, any> | undefined

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

remarkPlugins

PluggableList | null | undefined

Remark plugins to use. See PluggableList for more info.

rehypePlugins

PluggableList | null | undefined

Rehype plugins to use. See PluggableList for more info.

baseUrl

string | undefined

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

Return
Promise<Element>
Last updated