useMDXComponents

useMDXComponents is a React hook that implements the MDX component provider pattern, automatically providing Codespark components to MDX content without manual imports.

Configuration

To enable this hook, set providerImportSource to '@codespark/react' in your MDX configuration. Once configured, the hook is automatically invoked by the MDX runtime.

import remarkCodespark from '@codespark/plugin-remark';
import mdx from '@mdx-js/rollup'
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [
    mdx({
      providerImportSource: '@codespark/react', 
      remarkPlugins: [remarkCodespark]
    })
  ]
});

Return Value

The hook returns an object containing the following Codespark components:

These components are automatically available in MDX files without explicit imports when the provider is configured.

Related

• MDX Integration Guide - Complete guide for using Codespark with MDX
• Codespark - Main component API reference
• CodesparkEditor - Editor component API reference
• CodesparkPreview - Preview component API reference