Skip to content
This repository has been archived by the owner on Aug 29, 2020. It is now read-only.

A Gatsby MDX plugin to embed Twitter, YouTube, Instagram and many more in to your .mdx without import 🧼

License

Notifications You must be signed in to change notification settings

PaulieScanlon/gatsby-mdx-embed

Repository files navigation

gatsby-mdx-embed image

🚨 This project is now archived 🚨

...but good news!

A new project is on the way, head over to mdx-embed for more info

If you have any questions in the mean time you'll find me on Twitter: @pauliescanlon

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>;

General Observer update 07/05/2020

MDX Embed has been updated to include Intersection Observer support for all providers.

With Intersection Observer support now heavy provider scripts won't be loaded until the component in question scrolls in to view... Keeping your site blazing fast! ⚡

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

About

A Gatsby MDX plugin to embed Twitter, YouTube, Instagram and many more in to your .mdx without import 🧼

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published