gatsby-remark-giphy

Gatsby Remark plugin to embed gifs with ![](giphy:yay_a_gif)

The problem

Looking for gifs disrupts your writing flow. Use ![](giphy:search_term) and let gatsby-remark-giphy do the hard work for you.

For example, this line anywhere in your markdown:

![](giphy:yay_a_gif)

Creates a gif like this:

First search result from Giphy's API is used. This might not return the same image every time you run Gatsby build.

Installation

npm install gatsby-remark-giphy

yarn add gatsby-remark-giphy

gatsby-remark-giphy is meant to be used as a plugin for gatsby-transformer-remark or gatsby-plugin-mdx.

Usage

// In your gatsby-config.js

module.exports = {
    // Find the 'plugins' array
    plugins: [
        {
            resolve: `gatsby-transformer-remark`,
            options: {
                plugins: [
                    {
                        resolve: `gatsby-remark-giphy`,
                        options: {
                            giphyApiKey: `<your-api-key>`,
                        },
                    },

                    // Other plugins here...
                ],
            },
        },
    ],
};

// In your gatsby-config.js

module.exports = {
    // Find the 'plugins' array
    plugins: [
        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                gatsbyRemarkPlugins: [
                    {
                        resolve: `gatsby-remark-giphy`,
                        options: {
                            giphyApiKey: `<your-api-key>`,
                        },
                    },

                    // Other plugins here...
                ],
            },
        },
    ],
};

Options

You can configure how gatsby-remark-giphy works with these helpful options:

giphyApiKey: required - your Giphy API Key. Create a Giphy developers account, request an API key, and you're ready to go. You should consider using this via an ENV variable of some sort instead of directly in your gatsby-config
useVideo: optional - false by default. Whether to embed gifs as an autoplaying HTML5 video
useIframe: optional - false by default. Whether to embed gifs as Giphy's iframe embed.
embedWidth: options - 100% by default. Gif embed width for video and iframe options.

gatsby-remark-giphy uses plain gif-as-an-image embeds by default.

Getting the best performance

Video and iframe embeds use native lazy loading. Here's a performance comparison using an in-browser Lighthouse audit with different options.

Measured using ServerlessReact.Dev homepage to measure deployed to Zeit. There's a bunch of stuff on the page slowing it down. Configs for the 8 gifs embedded via ![](giphy:) are the only variable changing between tests.

Basic gif embed