Responsive and customizable search and select for Giphy's GIFs.
[![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 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.
## 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. |
| `rating` | string | Filters results by [specified rating](https://developers.giphy.com/docs/optional-settings/#rating). *Default:* `g` |
| `gifPerPage` | number | The maximum number of images to return per page. *Default:* `20` |
| `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 errror 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 `
