62 lines
1.5 KiB
Markdown
62 lines
1.5 KiB
Markdown
|
# 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} />
|
||
|
|
```
|