Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/swizec/gatsby-remark-giphy
Embed giphy search results with 
https://github.com/swizec/gatsby-remark-giphy
embed-gifs gatsby gatsby-plugin gatsby-plugins gatsby-remark gatsby-remark-giphy giphy giphy-api
Last synced: 4 days ago
JSON representation
Embed giphy search results with 
- Host: GitHub
- URL: https://github.com/swizec/gatsby-remark-giphy
- Owner: Swizec
- License: mit
- Created: 2020-04-04T22:18:52.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-25T18:08:02.000Z (11 months ago)
- Last Synced: 2024-04-26T11:22:30.451Z (7 months ago)
- Topics: embed-gifs, gatsby, gatsby-plugin, gatsby-plugins, gatsby-remark, gatsby-remark-giphy, giphy, giphy-api
- Language: TypeScript
- Size: 656 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-remark-giphy
[](#contributors-)
Gatsby Remark plugin to embed gifs with ``
## The problem
Looking for gifs disrupts your writing flow. Use `` and let gatsby-remark-giphy do the hard work for you.
For example, this line anywhere in your markdown:
`
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`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-transformer-remark) or [`gatsby-plugin-mdx`](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx).
## Usage
```javascript
// In your gatsby-config.js
module.exports = {
// Find the 'plugins' array
plugins: [
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-giphy`,
options: {
giphyApiKey: ``,
},
},
// Other plugins here...
],
},
},
],
};
```
```javascript
// In your gatsby-config.js
module.exports = {
// Find the 'plugins' array
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-giphy`,
options: {
giphyApiKey: ``,
},
},
// Other plugins here...
],
},
},
],
};
```
## Options
You can configure how `gatsby-remark-giphy` works with these helpful options:
- `giphyApiKey`: required - your [Giphy API Key](https://developers.giphy.com/). 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](https://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 `` are the only variable changing between tests.
_Basic gif embed_
_Video embed_
```
useVideo: true
```
_Iframe embed_
```
useIframe: true
```
## Contributors ✨
## LICENSE
MIT
