React twitter Gifpicker

Responsive Gifpicker for your React app

Prerequisite

Request a free api key @ https://support.giphy.com/hc/en-us/articles/360020283431-Request-A-GIPHY-API-Key

Installation

npm i react-twitter-gifpicker --save

import { useState } from 'react';
import GifPicker from 'react-twitter-gifpicker';

function App() {
  const [open, setOpen] = useState(false);
  const onPickGif = (gif, e) => {
    console.log(gif)
  }

  return (
    <div>
      <button onClick={() => setOpen(true)}>click</button>
      <GifPicker
        api_key={'your api key'}
        borderRadius={10}
        columns={4}
        open={open}
        onClose={() => setOpen(false)}
        onGifClick={onPickGif}
        onPickClose={false}
      />
    </div>
  );
}

User Guide

Props | Prop Name | Description | Type |Default Value | Example | | ----------- | ----------- |------|--------------|---------| | api_key | The api key for using giphy api | String | none | api_key={'your api key'} | | width | The width for the gifpicker container| number | 600 | width={500} | | height | The height for the gifpicker container| number | 70vh | height={400} | |topBarColor| The color for the top bar of gifpicker | String | ocean blue | topBarColor={'#000'} | | borderRadius | The border Radius for the gifpicker container | number | 15 | borderRadius={10} | | columns | The number of columns in the gifpicker grid | number | 4 | columns={3} | | open | Determine if the gifpicker should be opened | Boolean | false | opne={true} | | onPickClose | Close the gifpicker when a gif is cliked | Boolean | false | onPickClose={true} | | onClose | The function to call when the gifpick is about to close | Func | none | onClose={() => setClose(true)} | | onGifClick | The function to call when a gif is clicked. It takes two arguments: (gif: Object, e: event) | Func | none| const onPickGif = (gif, e) => { console.log(gif) } |

Note: onClose() relies on the external setClose() to close the gifpicker.

Gif Object = {
  ...,
  images: {
    480w_still: {height, width, size, url},
    downsized: {height, width, size, url},
    downsized_large: {height, width, size, url},
    downsized_medium: {height, width, size, url},
    downsized_small: {height, width, size, url},
    downsized_still: {height, width, size, url},
    ...,
    original_mp4: {height, width, mp4_size, mp4},
    preview: {height, width, mp4_size, mp4},
    preview_gif: {height, width, size, url}
  },
  ...
}