react-giphy-select

A React component for select GIFs on GIPHY.


Keywords
react, giphy, gif
License
MIT
Install
npm install react-giphy-select@1.0.3

Documentation

react-giphy-select

Build Status npm version

A React component for select GIFs by Giphy API.

Preview

By default it show GIFs currently trending online. But user can request a specific GIFs using the search input.

Attribution to Giphy

Please, read Giphy terms of service.

Installation

$ npm i -S react-giphy-select

Usage

The plugin ships with a default styling available at this location in the installed package:

node_modules/react-giphy-select/lib/styles.css

You will need Webpack or other build system, that supports requiring css files.

import React, { Component } from 'react';
import GiphySelect from 'react-giphy-select';
import 'react-giphy-select/lib/styles.css';

export default class Example extends Component {
  render() {
    return (
      <div>
        <GiphySelect />
      </div>
    );
  }
}

Props

  • theme - Object of CSS classes with the following keys.

    • select - CSS class for GiphySelect component.
    • selectInput - CSS class for search input.
    • list - CSS class for entries list.
    • listEmpty - CSS class for empty state of entries list.
    • listScrollbar - CSS class for scrollbar.
    • listScrollbarThumb - CSS class for scrollbar thumb.
    • listMasonry - CSS class for masonry layout.
    • listItem - CSS class for item of entries list.
    • listEntry - CSS class for entry.
    • listEntryImage - CSS class for entry image.
    • attribution - CSS class for attribution.
  • placeholder - Search input placeholder (by default "Search GIFs").

  • requestDelay - Delay before sending a request after the search input value is changed (by default 500 ms).

  • requestKey - Key for Giphy API (by default is used public beta key "dc6zaTOxFJmzC").

  • requestLang - Specify default country for regional content; format is 2-letter ISO 639-1 country code. See list of supported languages here.

  • requestRating - Limit results to those rated (y,g, pg, pg-13 or r) (by default "pg").

  • renderEntry - You can rewrite default renderEntry method

    renderEntry(entry, onSelect, options)
    • entry - Object with entry data from Giphy API.
    • onSelect - onEntrySelect callback.
    • options - Object, that contains theme parameter.
  • onEntrySelect - A callback which is triggered whenever the entry is selected.

    onEntrySelect(entry)
    • entry - Object with entry data from Giphy API.

Contribution

Install all dependencies, then start the demo

$ npm install
$ npm start

Don't forget about tests and lint check

$ npm run lint
$ npm test

Please, create issues and pull requests.

License

MIT.