https://github.com/sergiop/react-giphy-searchbox
Responsive and customizable search and select for Giphy's GIFs and Stickers.
https://github.com/sergiop/react-giphy-searchbox
giphy giphy-api giphy-gifs giphy-query react reactjs reactjs-component searchbox
Last synced: about 1 month ago
JSON representation
Responsive and customizable search and select for Giphy's GIFs and Stickers.
- Host: GitHub
- URL: https://github.com/sergiop/react-giphy-searchbox
- Owner: sergiop
- License: mit
- Archived: true
- Created: 2019-06-25T09:18:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-03T17:53:21.000Z (over 1 year ago)
- Last Synced: 2025-03-26T19:01:42.622Z (about 1 month ago)
- Topics: giphy, giphy-api, giphy-gifs, giphy-query, react, reactjs, reactjs-component, searchbox
- Language: JavaScript
- Homepage: https://sergiop.github.io/react-giphy-searchbox/
- Size: 2.83 MB
- Stars: 48
- Watchers: 3
- Forks: 20
- Open Issues: 26
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
Responsive and customizable search and select for Giphy's GIFs.
https://sergiop.github.io/react-giphy-searchbox/
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Codecov][codecov-badge]][Codecov]
---
**React Giphy Searchbox is a powerful react component that returns Giphy's GIF or Stickers in a Masonry grid layout.** Initially the component displays trending GIFs from Giphy's feed, when the the user starts typing something in the search field it switches to searched results. When an image is selected, a [GIF object](https://developers.giphy.com/docs/api/schema/#gif-object) is returned.
---
**Please note: [Axios](https://github.com/axios/axios) has been dropped in favor of the native [window.fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) method from version `1.3.0`. Please keep in mind that if you need to support old browsers you have to add a global polyfill like [github/fetch](https://github.com/github/fetch) or [developit/unfetch](https://github.com/developit/unfetch).**
---
## Demo
Play with a simple responsive demo on [CodeSandbox](https://codesandbox.io/s/react-giphy-searchbox-l8dxc?fontsize=14)
[](https://codesandbox.io/s/react-giphy-searchbox-l8dxc?fontsize=14)
## Getting started
### Installation
```
yarn add react-giphy-searchbox
```
```
npm install react-giphy-searchbox --save
```
### Basic example
```javascript
import React from 'react'
import { render } from 'react-dom'
import ReactGiphySearchbox from 'react-giphy-searchbox'
const App = () => (
console.log(item)}
/>
)
render(, document.getElementById("root"))
```
### Props
| Prop | Type | Desc ß |
| ------------------------ | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `apiKey` | `string` | **REQUIRED:** Giphy's API key. Get your on https://developers.giphy.com. |
| `onSelect` | `function` | **REQUIRED** A callback which is triggered whenever a GIF is selected. It returns a Gif object in the format specified for an image from Giphy's API. |
| `onSearch` | `function` | A callback which is triggered whenever a search is performed. It returns the searched text string. |
| `libray` | `'gifs' | 'stickers'` | Giphy's library: choose between `gifs` or `stickers`.
*Default:* `gifs` |
| `rating` | `string` | Filters results by [specified rating](https://developers.giphy.com/docs/optional-settings/#rating).
*Default:* `g` |
| `imageRenditionName` | `string` | The type of [rendition](https://developers.giphy.com/docs/optional-settings/#rendition-guide) to be used.
*Default:* `fixed_width_downsampled`.
Please be careful with this setting, loading high quality gifs inside the masonry can reduce the performances. |
| `imageRenditionFileType` | `'gif' | 'webp'` | The image type to be returned.
*Default:* `gif` |
| `gifPerPage` | `number` | The maximum number of images to return per page.
*Default:* `20` |
| `autoFocus` | `boolean` | If true, the search form input field is focused by default on startup.
*Default:* `false` |
| `masonryConfig` | `array` | An array of objects describing the masonry's properties at different breakpoints. [See specific chapter for further info.](#responsive-options)
*Default:* `[{ columns: 2, imageWidth: 120, gutter: 5 }]` |
| `gifListHeight` | `string` | The height of the returned GIF list.
*Default:* `300px` |
| `messageError` | `string` | Generic error message when APIs call fails.
*Default:* `Oops! Something went wrong. Please, try again.` |
| `messageLoading` | `string` | Loading message only for accessibility purposes.
*Default:* `Loading...` |
| `messageNoMatches` | `string` | Message to tell users searched string returned empty array.
*Default:* `No matches found.` |
| `loadingImage` | `string` | If you want to customize the loading spinner, use this prop to set an alternative `src` for the image. |
| `poweredByGiphy` | `boolean` | You can choose to display or not display the **Powered by Giphy** badge at the bottom. Note that you need to show it if you want a production Api key from Giphy.
*Default:* `true` |
| `poweredByGiphyImage` | `string` | If you want to customize the **Powered by Giphy** badge, use this prop to set an alternative `src` for the image. |
| `searchPlaceholder` | `string` | Search input placeholder.
*Default:* `Search for GIFs` |
| `wrapperClassName` | `string` | Additional CSS class for the `
` that wrap the whole component. |
| `searchFormClassName` | `string` | Additional CSS class for the `` element. |
| `listWrapperClassName` | `string` | Additional CSS class for the `` that wrap the GIFs list. |
| `listItemClassName` | `string` | Additional CSS class for the `` that wrap the single image. |
| `imageBackgroundColor` | `string` | Set the Giphy's image item background color, useful when `libray` prop is set to `stickers`, since stickers have transparent background.
*Default:* `#eee` |
### Responsive options
`masonryConfig` prop allow you to define responsiveness of the component. This prop accept an array of objects describing the masonry's properties at different breakpoints.
Each `object` in the array has the following properties:
| Prop | Type | Description |
| ------------ | ------ | ----------------------------------------------------------------- |
| `mq` | string | The minimum viewport width |
| `columns` | number | The number of vertical columns |
| `imageWidth` | number | The width (in px) of the image, and consequentially of the column |
| `gutter` | number | The space (in px) between the columns |
```javascript
[
{ columns: 2, imageWidth: 140, gutter: 10 },
{ mq: '700px', columns: 3, imageWidth: 200, gutter: 10 },
{ mq: '1000px', columns: 4, imageWidth: 220, gutter: 10 },
]
```
When defining your properties, note the following:
- properties must be listed **smallest to largest breakpoints** in a mobile first approach;
- The size without the `mq` property is assumed to be your **smallest breakpoint, and must appear first.**
## License
MIT. © 2021 Sergio Pedercini
[build-badge]: https://img.shields.io/travis/sergiop/react-giphy-searchbox?style=flat-square
[build]: https://travis-ci.org/sergiop/react-giphy-searchbox
[npm-badge]: https://img.shields.io/npm/v/react-giphy-searchbox?style=flat-square
[npm]: https://www.npmjs.org/package/react-giphy-searchbox
[codecov-badge]: https://img.shields.io/codecov/c/github/sergiop/react-giphy-searchbox?style=flat-square&token=c22b785c904542cfa751e2ff255e1180
[Codecov]: https://codecov.io/gh/sergiop/react-giphy-searchbox