Merge pull request #706 from timlrx/docs/mdx-component

docs: add example on creating a mdx chart component

README.md

@@ -256,6 +256,68 @@ See [Next.js on Netlify](https://docs.netlify.com/integrations/frameworks/next-j
 
 ## Frequently Asked Questions
 
+### How can I add a custom MDX component?
+
+Here's an example on how to create a donut chart from Chart.js (assuming you already have the dependencies installed) and use it in MDX posts. First, create a new `DonutChart.tsx` component in `components`:
+
+```tsx
+'use client'
+
+import { Doughnut } from 'react-chartjs-2'
+import { Chart as ChartJS, ArcElement, Tooltip, Legend } from 'chart.js'
+
+ChartJS.register(ArcElement, Tooltip, Legend)
+
+const DonutChart = ({ data }) => {
+  return <Doughnut data={data} />
+}
+
+export default Doughnut
+```
+
+Since the underlying `Doughnut` component uses React hooks, we add the `'use client'` directive to specify that it is a client side component. Also, there is an existing issue which prevents named components from being used, so we need to export the component as the default export.
+
+Next, add the component to `MDXComponents.tsx`:
+
+```diff
+...
++ import DonutChart from './DonutChart'
+
+export const components: MDXComponents = {
+  Image,
+  TOCInline,
+  a: CustomLink,
+  pre: Pre,
++  DonutChart,
+  BlogNewsletterForm,
+}
+```
+
+You can now use the component in `.mdx` files:
+
+```mdx
+## Example Donut Chart
+
+export const data = {
+  labels: ['Red', 'Blue', 'Yellow'],
+  datasets: [
+    {
+      label: '# of Votes',
+      data: [12, 19, 3],
+      backgroundColor: [
+        'rgba(255, 99, 132, 0.2)',
+        'rgba(54, 162, 235, 0.2)',
+        'rgba(255, 206, 86, 0.2)',
+      ],
+      borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)'],
+      borderWidth: 1,
+    },
+  ],
+}
+
+<DonutChart data={data} />
+```
+
 ### How can I customize the `kbar` search?
 
 Add a `SearchProvider` component such as the one shown below and use it in place of the default `SearchProvider` component in `app/layout.tsx`.