gatsby-plugin-mdx-embed
v1.1.3
Published
Embed 3rd party media content in MDX - no import required
Downloads
2,406
Maintainers
Readme
Gatsby Plugin MDX Embed
Gatsby Plugin MDX Embed allows you to easily embed popular 3rd party media content such as YouTube videos, Tweets,
Instagram posts and many more straight into your .mdx
- no import required!
Install
npm install mdx-embed gatsby-plugin-mdx-embed --save
Setup
add gatsby-plugin-mdx-embed
to the gatsby.config.js
plugins array.
// gatsby-config.js
module.exports = {
...
plugins: [`gatsby-plugin-mdx-embed`]
...
}
Alternatively
The Gatsby plugin works by wrapping the Gatsby "Root Element" with the MDXEmbedProvider
. If you encounter any issues
with the plugin you could try manually including the MDXEmbedProvider
in your project by adding the following to
gatsby-browser.js
and/or gatsby-ssr.js
// gatsby-browser.js || gatsby-ssr.js
import React from 'react';
import { MDXEmbedProvider } from 'mdx-embed';
export const wrapRootElement = ({ element }) => {
return <MDXEmbedProvider>{element}</MDXEmbedProvider>;
};
Migration
If you were a user of @pauliescanlon/gatsby-mdx-embed
here's how you can migrate to the new package and plugin.
1. Remove the old plugin
npm uninstall @pauliescanlon/gatsby-mdx-embed
2. Install the new dependencies
npm install mdx-embed gatsby-plugin-mdx-embed --save
3. Remove the old plugin from gatsby-config.js
and add the new plugin
// gatsby-config.js
module.exports = {
...
plugins: [
- `@pauliescanlon/gatsby-mdx-embed`
+ `gatsby-plugin-mdx-embed`
]
...
}
For more information about how to install the plugin please see the docs