---
**Please note: This is custom fork of [react-giphy-searchbox](https://www.npmjs.com/package/react-giphy-searchbox) with updated version of react and some bug fixes.**
---
**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 `
