MDX Website
In simpler terms, you can use React Components inside Markdown.
Authoring custom components for mdx is quite easy. Easily said it’s just a React Component and if you know react well then this will be easy as pie.
Here we’ll implement a custom callout like component with basic styling. This callout will have an emoji in the beginning and followed by text. So let’s get to it
This will be first thing that we’ll define. Here is the code, and we’ll be defining the code in the src/components/callout.js
file.
import React from "react"
const Callout = ({ emoji, children }) => {
return (
<div className="callout" emoji={emoji}>
<div className="callout-inner">
{children}
</div>
</div>
)
}
export default Callout
Here we’re making a new Callout function with 2 arguments. The Emoji argument is for the for the emoji for the callout and the children argument is the data that will be enclosed inside the component’s tags while in use. We’re appending the emoji tag to the div as an attribute for getting the data with CSS.
Now we need to be able to use it in the blog/website. I’ll show an example of a blog.
In your src/templates/blog-post.js
file add these in the top
import { MDXProvider } from "@mdx-js/react"
import Callout from "../components/callout"
const shortcodes = {
Callout
}
and for using the callout inside the markdown content, paste this
<MDXProvider components={shortcodes}>
<MDXRenderer>{post.body}</MDXRenderer>
</MDXProvider>
Now we’ll be able to use it with our content.
I’ve used CSS styling for the component since i’m comfortable with CSS.
.callout {
color: black;
background: azure;
padding: 1.5em 1.25em;
border-radius: 25px;
display: flex;
flex-direction: row;
margin-top: 20px;
border-bottom-width: 4px ;
border-bottom-style: solid;
border-bottom-color: #50fa7b;
border-left-color: #50fa7b;
border-left-width: 6px;
border-left-style: solid;
}
.callout-inner {
font-style: italic;
margin-left: 1em;
}
@media (max-width: 767px) {
.callout {
padding: 1.5em 0.75em 1.5em 0.6em;
}
.callout-inner {
margin-left: 0.5em;
}
}
div .callout::before{
color:red;
content: attr(emoji);
}
You can use any other framework or library for styling and it’s upto personal preference.
Now we want out custom made callout component to be used with our content. For that just call the components inside our post like this
<Callout emoji="🔮">
This data will be displayed in the callout component
</Callout>
So that was easy right? Creating a new component and using it here and all the stuff.
Even better, you can use already other components too other than the custom made ones, For that just import the component and use it in the content like this. Here we’re using components from Rebass, you can use any one you prefer.
import { Box } from 'rebass'
<Box
color='white'
bg='blue'
p={3}
my={5}
>
> ”This is an important quote.”
</Box>
So we have just made a custom component for MDX and now we know how to use other components to be used in our content. So that’s all ⚡️.