With gatsby-mdx-embed you can embed media content from providers like Twitter, YouTube, Instagram and a number of others directly in .mdx ... no imports required

• Live Demo

npm install @pauliescanlon/gatsby-mdx-embed --save

npm install @mdx-js/react gatsby-plugin-mdx --save

// gatsby.config
module.exports = {
  ...
  plugins: [`@pauliescanlon/gatsby-mdx-embed`]
  ...
}

gatsby-mdx-embed automatically injects an MdxProvider. If it's the first and / or only plugin that uses this method you shouldn't have any clashes.

However, if you're using a theme or some other plugin that uses .mdx you may need to switch the order of the plugins.

A note on using multiple MdxProvider(s) directly from @chrisbiscardi

Multiple providers will merge the components object. Last provider wins

If you're using gatsby-mdx-embed in your project i'd love to hear from you @pauliescanlon

Thanks to the following projects which were used as references

• gatsby-remark-oembed
• gatsby-plugin-twitter
• gatsby-plugin-instagram-embed