gatsby-remark-giphy
v2.0.0
Published
Embed giphy search results with ![](giphy:search_term))
Downloads
40
Maintainers
Readme
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
or
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-configuseVideo
: optional - false by default. Whether to embed gifs as an autoplaying HTML5 videouseIframe
: 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
Video embed
useVideo: true
Iframe embed
useIframe: true
Contributors ✨
LICENSE
MIT