react-giphy-select

A React component for select GIFs on GIPHY.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-giphy-select
13171.0.35 years ago5 years agoMinified + gzip package size for react-giphy-select in KB

Readme

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

```javascript 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.

```javascript 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.