Skip to content
A Gatsby mdx plugin to embed Twitter, YouTube Instagram and many more in to your .mdx without imports 🧼
TypeScript CSS JavaScript
Branch: master
Clone or download

README.md

gatsby-mdx-embed image

gatsby-mdx-embed

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

👁️ Preview

🚀 Getting started

Install

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

Install peer dependencies

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

Setup

// 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 the above doesn't help you might need to manually import the MdxEmbedProvider and use it to wrap your MDXRenderer

// layout.js

import { MdxEmbedProvider } from "@pauliescanlon/gatsby-mdx-embed";

<MdxEmbedProvider>
  <MDXRenderer>{body}</MDXRenderer>
</MdxEmbedProvider>;

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

ko-fi

Thanks to the following projects which were used as references

You can’t perform that action at this time.