React wrapper for the Giphy API
npm install react-awesome-giphyTo install, run:
``bash`with npm
npm i --save react-awesome-giphyor 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 🧱
The API is simple. Import the component, attach your Giphy API key as a prop, and you're done!
`jsx
import React from 'react'
import Giphy from 'react-awesome-giphy'
const App = () => {
return (
/>
)
}
`
renders 👇
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.
---
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:
`jsx
import { Gif } from './components'
const [chat, setChat] = React.useState([])
callback={item => setChat(state =>
[...state,
)}
/>
`
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 resultsrating
| |undefined |Allowed rating content of the GIFs. Values include 'g', 'pg', 'pg-13', and 'r'randomId
| |undefined |A unique ID to specify a userbundle
| |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:
`jsx
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 (
onClick={() => handleDisplay('gifs')}
>
GIFs
onClick={() => handleDisplay('stickers')}
>
Stickers
display={displayState}
displayCallback={handleDisplay}
/>
)
}
`
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 colortextAltColor
| |#AFB1B2|Alternate text coloringbgColor
| |#2F3136|Default background colorbgAltColor
| |#4E4E4E|Alternate background colorbuttonColor
| |#4F535C|Button background color for active and hover statesinputColor
| |#212325|Input background coloraccentColor
| |#02AEF4|Accent color for item hover states and loading spinner
Here is a diagram laying that out:
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.
Note that directly overwriting class styles is not recommended. Here is an example of how the css prop can be used:
`jsx
const hoverColor = 'lemonchiffon'
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.