React Giphy Searchbox
npm install react-giphy-searchbox2

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 is returned.

---
Please note: Axios has been dropped in favor of the native window.fetch() 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 or developit/unfetch.
---
Play with a simple responsive demo on CodeSandbox

```
yarn add react-giphy-searchbox
``
npm install react-giphy-searchbox --save
`javascript
import React from 'react'
import { render } from 'react-dom'
import ReactGiphySearchbox from 'react-giphy-searchbox'
const App = () => (
onSelect={item => console.log(item)}
/>
)
render(
`
| 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. gifs
Default: |rating
| | string | Filters results by specified rating. g
Default: |imageRenditionName
| | string | The type of rendition to be used. fixed_width_downsampled
Default: . imageRenditionFileType
Please be careful with this setting, loading high quality gifs inside the masonry can reduce the performances. |
| | 'gif' | 'webp' | The image type to be returned. gif
Default: |gifPerPage
| | number | The maximum number of images to return per page. 20
Default: |autoFocus
| | boolean | If true, the search form input field is focused by default on startup. false
Default: |masonryConfig
| | array | An array of objects describing the masonry's properties at different breakpoints. See specific chapter for further info. [{ columns: 2, imageWidth: 120, gutter: 5 }]
Default: |gifListHeight
| | string | The height of the returned GIF list. 300px
Default: |messageError
| | string | Generic error message when APIs call fails. Oops! Something went wrong. Please, try again.
Default: |messageLoading
| | string | Loading message only for accessibility purposes. Loading...
Default: |messageNoMatches
| | string | Message to tell users searched string returned empty array. No matches found.
Default: |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. true
Default: |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. Search for GIFs
Default: |wrapperClassName
| | string | Additional CSS class for the
that wrap the whole component. |
| searchFormClassName | string | Additional CSS class for the