giphy_react_components_trending_gifs_responsive_grid.ts

1import { GiphyFetch } from '@giphy/js-fetch-api'
2import { Grid } from '@giphy/react-components'
3import React, { useState } from 'react'
4
5// use @giphy/js-fetch-api to fetch gifs, 
6// use your own api key from the developers dashboard https://developers.giphy.com/dashboard/
7const gf = new GiphyFetch('your-api-key-here')
8
9function GridDemo() {
10  const [width, setWidth] = useState(window.innerWidth)
11  
12  // fetch gifs for the grid
13  const fetchGifs = (offset: number) => gf.trending({ offset, limit: 10 })
14
15  return (
16    <Grid
17      onGifClick={(gif, e) => {
18        console.log('gif', gif)
19        e.preventDefault()
20      }}
21      fetchGifs={fetchGifs}
22      width={width}
23      columns={3}
24      gutter={6}
25    />
26  )
27}
28
29export default GridDemo