feat: expose MDXProvider from next-mdx-remote

README.md

@@ -175,11 +175,11 @@ export async function getStaticProps() {
     Custom components from <code>MDXProvider</code><a id="mdx-provider"></a>
   </summary>
 
-If you want to make components available to any `<MDXRemote />` being rendered in your application, you can use [`<MDXProvider />`](https://mdxjs.com/docs/using-mdx/#mdx-provider) from `@mdx-js/react`.
+If you want to make components available to any `<MDXRemote />` being rendered in your application, you can use [`<MDXProvider />`](https://mdxjs.com/docs/using-mdx/#mdx-provider) directly from `next-mdx-remote`.
 
 ```jsx
 // pages/_app.jsx
-import { MDXProvider } from '@mdx-js/react'
+import { MDXProvider } from 'next-mdx-remote'
 
 import Test from '../components/test'
 
@@ -305,7 +305,7 @@ This library exposes a function and a component, `serialize` and `<MDXRemote />`
       mdxOptions: {
         remarkPlugins: [],
         rehypePlugins: [],
-        format: 'mdx'
+        format: 'mdx',
       },
       // Indicates whether or not to parse the frontmatter from the mdx source
       parseFrontmatter: false,
@@ -407,13 +407,12 @@ export default function ExamplePage({ mdxSource }: Props) {
   )
 }
 
-export const getStaticProps: GetStaticProps<{mdxSource: MDXRemoteSerializeResult}> =
-  async () => {
-    const mdxSource = await serialize(
-      'some *mdx* content: <ExampleComponent />'
-    )
-    return { props: { mdxSource } }
-  }
+export const getStaticProps: GetStaticProps<{
+  mdxSource: MDXRemoteSerializeResult
+}> = async () => {
+  const mdxSource = await serialize('some *mdx* content: <ExampleComponent />')
+  return { props: { mdxSource } }
+}
 ```
 
 ## Migrating from v2 to v3

__tests__/serialize.test.tsx

@@ -3,7 +3,7 @@ import ReactDOMServer from 'react-dom/server'
 import { paragraphCustomAlerts } from '@hashicorp/remark-plugins'
 import * as MDX from '@mdx-js/react'
 
-import { MDXRemote } from '../src/index'
+import { MDXRemote, MDXProvider } from '../src/index'
 import { serialize } from '../src/serialize'
 import { renderStatic } from '../.jest/utils'
 
@@ -74,13 +74,13 @@ describe('serialize', () => {
     const mdxSource = await serialize('<Test />')
 
     const result = ReactDOMServer.renderToStaticMarkup(
-      <MDX.MDXProvider
+      <MDXProvider
         components={{
           Test: () => <p>Hello world</p>,
         }}
       >
         <MDXRemote {...mdxSource} />
-      </MDX.MDXProvider>
+      </MDXProvider>
     )
 
     expect(result).toMatchInlineSnapshot(`"<p>Hello world</p>"`)

src/index.tsx

@@ -40,6 +40,8 @@ export type MDXRemoteProps = MDXRemoteSerializeResult & {
 
 export { MDXRemoteSerializeResult }
 
+export const MDXProvider = mdx.MDXProvider
+
 /**
  * Renders compiled source from next-mdx-remote/serialize.
  */
@@ -101,9 +103,9 @@ export function MDXRemote({
   // wrapping the content with MDXProvider will allow us to customize the standard
   // markdown components (such as "h1" or "a") with the "components" object
   const content = (
-    <mdx.MDXProvider components={components}>
+    <MDXProvider components={components}>
       <Content />
-    </mdx.MDXProvider>
+    </MDXProvider>
   )
 
   // If lazy = true, we need to render a wrapping div to preserve the same markup structure that was SSR'd