Creating a Markdown Blog

Embed React Components

In the beginning, we discuss about embedding React components. Now it's time to do that.

Here we are trying to embed a Youtube component. So, let's create file named components/Youtube.js and add the following content:

export default function Youtube(props) {
    const { videoId, width = '100%', height = 366 } = props
    const src = `${videoId}`

    return (
        <div className='youtube-container'>
            <iframe width={width} height={height} src={src} frameBorder='0' allow='autoplay; encrypted-media' allowFullScreen='1' />

then import this Youtube component inside pages/post/[slug].js with:

import Youtube from '../../components/Youtube'

After that, change how we render the Markdown content into this:

        overrides: {
            Youtube: { component: Youtube }

(Here's the final version of the file after all these changes.)

See. This is how we inject a React component at the compile time. You can learn more about this from the markdown-to-jsx documentation.

Now you can embed this component inside the Markdown file. To do that, you can edit a file in the data directory and see the result.

So, what's the embedding syntax will look like:

Option 1

${<Youtube videoId="RE2eHnOEqI4"/>}

Option 2

<$Youtube videoId="RE2eHnOEqI4">}

Option 3

<Youtube videoId="RE2eHnOEqI4"/>

Option 4

import Youtube
${<Youtube videoId="RE2eHnOEqI4"/>}
Q: Select the correct option:

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: