Giphy API Example

giphy.js

import {
  checkStatus,
  parseJSON
} from './request';

/**
 * Request data Giphy API
 * https://developers.giphy.com/explorer/
 */

const endpoint = 'https://api.giphy.com/v1/gifs/search';

export default function requestGif({
  apiKey = '',  // <-- provide this!
  lang = 'en',
  limit = '1',
  offset = '0',
  rating = 'G',
  term = 'shrug',
} = {}) {
  const queryUri = `?api_key=${apiKey}&q=${term}&limit=${limit}&offset=${offset}&rating=${rating}&lang=${lang}`;

  return fetch(endpoint + queryUri)
    .then(checkStatus)
    .then(parseJSON);
}

usage.js

import requestGif from './giphy';

requestGif({
  apiKey: CONFIG.giphyApiKey,
  term: CONFIG.giphyTerm,
}).then((response) => {
  const newImage = document.createElement('img');
  newImage.src = response.data[0].images.fixed_width.url;

  // Insert new image element into some DOM element with `data-image="giphy"`
  const target = document.querySelector('[data-image="giphy"]');
  target.appendChild(newImage);
});