react-giphy-picker-https
react-giphy-picker-https is a simple gif picker component using giphy API over https.
Install
yarn add @progresso/react-giphy-picker-https
Usage basic
import Picker from 'react-giphy-picker-https'
import ReactDOM from 'react-dom'
import React, { Component, PropTypes } from 'react'
class TestComponent extends Component {
log (gif) {
console.log(gif)
}
render () {
return (
<div>
<Picker apiKey="your-giphy-api-key" onSelected={this.log.bind(this)} />
</div>
)
}
}
ReactDOM.render(
<TestComponent />,
document.getElementById('root')
)Props
apiKey (required)
Your giphy api key, see API Quickstart Guide on developers.giphy.com.
width (required)
The width of the control, in pixels. Used for layouting gifs with different sizes.
onSelected (required)
Handles a gif selection and provides the selected gif as a Gif Object.
visible
Set to true to make the component visible.
modal
Set to true, if you want the component to be displayed as a floating layer. It will set the component position: absolute and add a box shadow.
style
A React.CSSProperties object that appies to the outer component shape.
searchBoxStyle
A React.CSSProperties object that applies to the component's search box.
gifStyle
A React.CSSProperties object that applies to each rendered gif image within the component.
scrollComponent
A React.Component that should be used for scrolling. If not provided, a default <div /> with overflow-y: auto is used.
Development
yarn
yarn dev
Test
yarn test
Build
yarn
yarn build