f-giphy-pfft-js-components

A lightweight set of components, focused on ease-of-use and performance.

Try it out:

Grid

Use renderGrid(props, target) to render a grid to a target element

Bare Bones Example

// use f-giphy-pfft-js-fetch-api to fetch gifs
// apply for a new Web SDK key. Use a separate key for every platform (Android, iOS, Web)
const gf = new GiphyFetch('your Web SDK key')
// fetch 10 gifs at a time as the user scrolls (offset is handled by the grid)
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 10 })
// render a grid
renderGrid({ width: 800, fetchGifs }, targetEl)

renderGrid options

prop	type	default	description
width	number	undefined	The width of the grid
fetchGifs	(offset:number) => Promise<GifsResult>	undefined	A function that returns a Promise. Use f-giphy-pfft-js-fetch-api
columns	number	3	The number of columns in the grid
gutter	number	6	The space between columns and rows
noResultsMessage	`string		element`
noLink	boolean	false	Use a div instead of an a tag for the Gif component, user defines functionality with onGifClick
hideAttribution	boolean	false	Hide the user attribution that appears over a
Gif Events	*	*	see below

Thorough Example

import { throttle } from 'throttle-debounce'
import { renderGrid } from 'f-giphy-pfft-js-components'
import { GiphyFetch } from 'f-giphy-pfft-js-fetch-api'

// create a GiphyFetch with your api key
// apply for a new Web SDK key. Use a separate key for every platform (Android, iOS, Web)
const gf = new GiphyFetch('your Web SDK key')
// create a fetch gifs function that takes an offset
// this will allow the grid to paginate as the user scrolls
const fetchGifs = (offset: number) => {
    // use whatever end point you want,
    // but be sure to pass offset to paginate correctly
    return gf.trending({ offset, limit: 25 })
}

// Creating a grid with window resizing and remove-ability
const makeGrid = (targetEl: HTMLElement) => {
    const render = () => {
        // here is the f-giphy-pfft-js-components import
        return renderGrid(
            {
                width: innerWidth,
                fetchGifs,
                columns: width < 500 ? 2 : 3,
                gutter: 6,
            },
            targetEl
        )
    }
    const resizeRender = throttle(500, render)
    window.addEventListener('resize', resizeRender, false)
    const remove = render()
    return {
        remove: () => {
            remove()
            window.removeEventListener('resize', resizeRender, false)
        },
    }
}

// Instantiate
const grid = makeGrid(document.querySelector('.grid'))

// To remove
grid.remove()

Carousel

renderCarousel options

property	type	default	description
gifHeight	number	undefined	The height of the gifs and the carousel
fetchGifs	(offset:number) => Promise<GifsResult>	undefined	A function that returns a Promise. Use f-giphy-pfft-js-fetch-api
gutter	number	6	The space between columns and rows
noResultsMessage	`string		element`
hideAttribution	boolean	false	Hide the user attribution that appears over a
noLink	boolean	false	Use a div instead of an a tag for the Gif component, user defines functionality with onGifClick
Gif Events	*	*	see below

import { renderCarousel } from 'f-giphy-pfft-js-components'
import { GiphyFetch } from 'f-giphy-pfft-js-fetch-api'

// create a GiphyFetch with your api key
// apply for a new Web SDK key. Use a separate key for every platform (Android, iOS, Web)
const gf = new GiphyFetch('your Web SDK key')

// Creating a grid with window resizing and remove-ability
const vanillaJSCarousel = (mountNode: HTMLElement) => {
    renderCarousel(
        {
            gifHeight: 200,
            fetchGifs: (offset: number) => gf.trending({ offset }),
            gutter: 6,
            onGifClick: (gif: IGif) => window.open(gif.url),
        },
        mountNode
    )
}

Gif

Gif props

prop	type	default	description
gif	IGif	undefined	The gif to display
width	number	undefined	The width of the gif
backgroundColor	string	random giphy color	The background of the gif before it loads
hideAttribution	boolean	false	Hide the user attribution that appears over a GIF
noLink	boolean	false	Use a div instead of an a tag for the Gif component, user defines functionality with onGifClick
Gif Events	*	*	see below

import { renderGif } from 'f-giphy-pfft-js-components'
import { GiphyFetch } from 'f-giphy-pfft-js-fetch-api'

// create a GiphyFetch with your api key
// apply for a new Web SDK key. Use a separate key for every platform (Android, iOS, Web)
const gf = new GiphyFetch('your Web SDK key')

const vanillaJSGif = async (mountNode: HTMLElement) => {
    // render a single gif
    const { data: gif1 } = await gf.gif('fpXxIjftmkk9y')
    renderGif({ gif: gif1, width: 300 }, mountNode)
}

Attribution Overlay

If a GIF has an associated user, an overlay with their avatar and display name will appear. This can be hidden with hideAttribution on any of the components.

Gif Events

property	type	description
onGifHover	(gif: IGif, e: Event) => void	fired on desktop when hovered for
onGifVisible	(gif: IGif, e: Event) => void	fired every time the gif is show
onGifSeen	(gif: IGif, boundingClientRect: ClientRect | DOMRect) => void	fired once after the gif loads and when it's completely in view
onGifClick	(gif: IGif, e: Event) => void	fired when the gif is clicked
onGifRightClick	(gif: IGif, e: Event) => void	fired when the gif is right clicked