react-awesome-giphy
TypeScript icon, indicating that this package has built-in type declarations

2.0.4 • Public • Published

react-awesome-giphy

This is a library that acts as a component wrapper for the Giphy API.

To install, run:

# with npm
npm i --save react-awesome-giphy
# or with yarn
yarn add react-awesome-giphy

Features:

  • Highly customizable to match your app's design 💅
  • Performant 💪
  • Production ready ✔️
  • Masonry loadout and lazy-loading built-in 🧱

Demo 💿

Check out the demo here!

Usage 🍳

The API is simple. Import the component, attach your Giphy API key as a prop, and you're done!

import React from 'react'
import Giphy from 'react-awesome-giphy'

const App = () => {
    return (
        <Giphy
            apiKey={process.env.API_KEY}
        />
    )
}

renders 👇

Demo Gif

Note that the API key is the only required prop for this component. If you don't have one, you can check out this official page for more information.


Functional Props 🎣

Perhaps the most important prop is callback, which is a function that handles the GIF or sticker data. The callback function you pass is called in the onClick of any item displayed in the masonry, and can (and probably should) take the particular item's data as an input. By default, a console.log is run.

Here's an imagined example of how to use it:

import { Gif } from './components'
const [chat, setChat] = React.useState([])

<Giphy 
    apiKey={process.env.API_KEY}
    callback={item => setChat(state => 
        [...state, <Gif src={item.images.original.url} />]
    )}
/>

If you're not sure how to use the Giphy data, try clicking around and inspecting the data yourself in your console.

Additionally, every option available in the Giphy API is accepted as a prop. You can view all of these and their usage at this official source. These include:

prop default description
limit 12 The amount of items to return (keep low to optimize performance)
offset undefined Starting position of the results
rating undefined Allowed rating content of the GIFs. Values include 'g', 'pg', 'pg-13', and 'r'
randomId undefined A unique ID to specify a user
bundle undefined Returns renditions matching specified bundle

Lastly, you may want to sync the internal state of this component with your own UI. You can do that with the display and displayCallback props documented below.

prop default description
display 'gifs' Determines if the component should open to display GIPHY stickers rather than GIFs. Valid values are 'gifs' or 'stickers'
displayCallback undefined A callback function that gets called when the display buttons are pressed. Must take the current display state as an input, which is necessarily either 'gifs' or 'stickers'

In other words, display is how your UI interacts with the internal component state, and displayCallback is how the internal state interacts with your UI. If you want to simply set the default display, just pass display a stateless string.

You can see these props in action in the demo, but here is an example of how they might be useful:

import React from 'react'
import Giphy from 'react-awesome-giphy'

const App = () => {
    const [displayState, setDisplayState] = React.useState('gifs')
    const handleDisplay = value => {
        // Value must be 'gifs' or 'stickers'
        setDisplayState(value)
    }

    return (
        <button
            onClick={() => handleDisplay('gifs')}
        >
            GIFs
        </button>
        <button
            onClick={() => handleDisplay('stickers')}
        >
            Stickers
        </button>

        <Giphy
            apiKey={process.env.API_KEY}
            display={displayState}
            displayCallback={handleDisplay}
        />
    )
}

Styling Props 🎨

The design of this component is based very heavily on Discord's chat window for GIFs. However, if that doesn't float your boat, there's props for basically every aspect of the theme.

prop default description
textColor #FEFEFF Default text color
textAltColor #AFB1B2 Alternate text coloring
bgColor #2F3136 Default background color
bgAltColor #4E4E4E Alternate background color
buttonColor #4F535C Button background color for active and hover states
inputColor #212325 Input background color
accentColor #02AEF4 Accent color for item hover states and loading spinner

Here is a diagram laying that out:

Diagram

Additional styling props include:

prop default description
height 425 Height of the component (in px)
width 425 Width of the component (in px)
columns 2 Number of columns to split results into

Lastly, there is a css prop that can be used to inject css strings directly into the component. This targets the component wrapper, so children can be accessed within this prop by their classnames, diagrammed below. Every classname starts with ".giphy" and a double underscore.

Diagram

Note that directly overwriting class styles is not recommended. Here is an example of how the css prop can be used:

const hoverColor = 'lemonchiffon'

<Giphy 
    apiKey={process.env.API_KEY}
    css={`
        box-shadow: -3px 3px 5px lavenderblush;
        &:hover {
            border: solid 1px ${hoverColor};
        }
    `}
/>

Made with 💙 by Given Suman using:

  • React
  • Typescript
  • Emotion

Check out the Github.

Package Sidebar

Install

npm i react-awesome-giphy

Weekly Downloads

31

Version

2.0.4

License

MIT

Unpacked Size

84 kB

Total Files

17

Last publish

Collaborators

  • tinkoh