next-mdxlayer/dist/hooks/useMDXComponent.d.ts

Next.js plugin to integrate mdxlayer CLI and generated content

import { default as React } from 'react';
type IntrinsicMDXComponents = {
    [K in keyof React.JSX.IntrinsicElements]?: React.ComponentType<React.JSX.IntrinsicElements[K]>;
};
export type MDXComponents = IntrinsicMDXComponents & Record<string, React.ComponentType<any>>;
interface MDXContentProps {
    [props: string]: unknown;
    components?: MDXComponents;
}
export declare const getMDXComponent: (code: string, globals?: Record<string, unknown>) => React.FC<MDXContentProps>;
/**
 * A React hook to render MDX content generated by `mdxlayer`.
 *
 * This is intended to be used with the output from `mdxlayer`, which compiles MDX files
 * into serialized JavaScript code (a string function body).
 *
 * @param code - The MDX runtime code string generated by `mdxlayer`
 * @param globals - Optional global components or utilities to inject
 * @returns A React component ready to render the MDX content
 *
 * @example
 * ```tsx
 * import { useMDXComponent } from 'next-mdxlayer/hook';
 * import { allServices } from 'mdxlayer/generated';
 *  import MyAudioComponent from './audio'
 *  import MyIntroComponent from './intro'
 *
 * export default function MyPage() {
 *   const MDXComponent = useMDXComponent(allServices[0]._body.code);
 *   return (
 *     <MDXComponent
 *       components={{
 *         a: (props) => <a {...props} className="underline text-blue-600" />,
 *         img: (props) => <img {...props} style={{ maxWidth: '100%' }} />,
 *         Audio: MyAudioComponent,
 *         Introduction: MyIntroComponent,
 *       }}
 *     />
 *   );
 * }
 * ```
 */
export declare const useMDXComponent: (code?: string, globals?: Record<string, unknown>) => React.FC<MDXContentProps>;
export {};