Challenges

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 = `https://www.youtube.com/embed/${videoId}`

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

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:

<Markdown
    options={{
        overrides: {
            Youtube: { component: Youtube }
        }
    }}
>
    {post.content}
</Markdown>

(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:
authenticating...

šŸ™ We need your help

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