There are three URLs for analytics - at what points do these need to be called? Is loaded called when the search results load or when the result of clicking on the gif is loaded? When is the click URL called vs the sent URL?

Thanks

Hi,

I am using the GIPHY SDK (not the API)
I know there is a GIF component that we can import to display GIF; however I would like to use my own component.
Above all, I would like to have the file as a *.gif, not an actual URL link.

The reason being, in react I would like to use with gif_src being fetched when we use the props "onGifClick" from the Grid for example.

is there anyway to do so?
Any help would be greatly appreciated.

Getting above

Any idea?

Seems something works.. getting a 200 ok

I followed the sdk and sandbox to simply render a single gif: https://codesandbox.io/s/1wq52x1w44?fontsize=14&file=/src/gif.ts

But when I import renderGif:

import { renderGif } from '@giphy/js-components';

It throws an error:

ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/carousel.d.ts
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/carousel.d.ts(42,21):
TS7016: Could not find a declaration file for module 'throttle-debounce'. '/my-project-dir/node_modules/throttle-debounce/index.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/throttle-debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'throttle-debounce';`

ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/grid.d.ts
ERROR in /my-project-dir/node_modules/@giphy/js-components/dist/components/grid.d.ts(58,21):
TS7016: Could not find a declaration file for module 'throttle-debounce'. '/my-project-dir/node_modules/throttle-debounce/index.cjs.js' implicitly has an 'any' type.
  Try `npm install @types/throttle-debounce` if it exists or add a new declaration (.d.ts) file containing `declare module 'throttle-debounce';`

The docs do not state any dependency to throttle-debounce. If there are no dependencies but the types are needed in order @giphy/js-components to work, then they should be included in the package.json of @giphy/js-components imo.

Seems like pingback calls will be caught in adblock.
Not sure if there's anything you want to do against this, but thought I'd ask.

The IImages states that downsized and downsized_still are always present, however, it's not true. Recently we've captured an exception with a IImages missing both downsized and downsized_still.

Here's the culprit:

{
  "type": "gif",
  "id": "FftX0IDWgZw074Oqb1",
  "url": "https://giphy.com/gifs/Roland-Garros-djokovic-novak-FftX0IDWgZw074Oqb1",
  "slug": "Roland-Garros-djokovic-novak-FftX0IDWgZw074Oqb1",
  "bitly_gif_url": "https://gph.is/g/Eq5Mz8D",
  "bitly_url": "https://gph.is/g/Eq5Mz8D",
  "embed_url": "https://giphy.com/embed/FftX0IDWgZw074Oqb1",
  "username": "Roland-Garros",
  "source": "",
  "title": "French Open Tennis GIF by Roland-Garros",
  "rating": "g",
  "content_url": "",
  "source_tld": "",
  "source_post_url": "",
  "is_sticker": false,
  "import_datetime": "2020-10-08 10:54:23",
  "trending_datetime": "2021-09-07 00:41:49",
  "images": {
    "original": {
      "height": "270",
      "width": "480",
      "size": "8552905",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.gif&ct=g",
      "mp4_size": "516802",
      "mp4": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.mp4?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.mp4&ct=g",
      "frames": "146",
      "hash": "3834f1c2c86dadf9f603d3c1ff686edb"
    },
    "downsized_large": {
      "height": "270",
      "width": "480",
      "size": "5765173",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy-downsized-large.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy-downsized-large.gif&ct=g"
    },
    "downsized_medium": {
      "height": "216",
      "width": "384",
      "size": "3616080",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy-downsized-medium.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy-downsized-medium.gif&ct=g"
    },
    "fixed_height": {
      "height": "200",
      "width": "356",
      "size": "4998274",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200.gif&ct=g"
    },
    "fixed_height_downsampled": {
      "height": "200",
      "width": "356",
      "size": "262328",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200_d.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200_d.gif&ct=g"
    },
    "fixed_height_still": {
      "height": "200",
      "width": "356",
      "size": "45799",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200_s.gif&ct=g"
    },
    "fixed_width": {
      "height": "113",
      "width": "200",
      "size": "1635927",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w.gif&ct=g",
      "webp_size": "180512",
      "webp": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w.webp?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w.webp&ct=g"
    },
    "fixed_width_downsampled": {
      "height": "113",
      "width": "200",
      "size": "92135",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w_d.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w_d.gif&ct=g"
    },
    "fixed_width_still": {
      "height": "113",
      "width": "200",
      "size": "16580",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/200w_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=200w_s.gif&ct=g"
    },
    "original_still": {
      "height": "270",
      "width": "480",
      "size": "77083",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy_s.gif?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy_s.gif&ct=g"
    },
    "original_mp4": {
      "height": "270",
      "width": "480",
      "mp4_size": "516802",
      "mp4": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/giphy.mp4?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=giphy.mp4&ct=g"
    },
    "480w_still": {
      "height": "270",
      "width": "480",
      "size": "8552905",
      "url": "https://media2.giphy.com/media/FftX0IDWgZw074Oqb1/480w_s.jpg?cid=0291a4c14ftea62gw8d10ab11u1yagka6vnh4ln3vcf2kjwc&rid=480w_s.jpg&ct=g"
    }
  },
  "user": {
    "avatar_url": "https://media1.giphy.com/avatars/Roland-Garros/9ztB7JZL1WCt.gif",
    "banner_image": "https://media1.giphy.com/headers/Roland-Garros/qGSHfw6PzKqO.jpg",
    "banner_url": "https://media1.giphy.com/headers/Roland-Garros/qGSHfw6PzKqO.jpg",
    "profile_url": "https://giphy.com/Roland-Garros/",
    "username": "Roland-Garros",
    "display_name": "Roland-Garros",
    "description": "Roland-Garros / French Open / Internationaux de France From Sunday 27th September to Sunday 11 October 2020. #RolandGarros http://rolandgarros.com",
    "instagram_url": "https://instagram.com/rolandgarros",
    "website_url": "https://www.rolandgarros.com/fr-fr/",
    "is_verified": true,
    "suppress_chrome": false,
    "is_public": false
  },
  "analytics_response_payload": "e=Z2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg",
  "analytics": {
    "onload": {
      "url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=SEEN"
    },
    "onclick": {
      "url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=CLICK"
    },
    "onsent": {
      "url": "https://giphy-analytics.giphy.com/v2/pingback_simple?analytics_response_payload=e%3DZ2lmX2lkPUZmdFgwSURXZ1p3MDc0T3FiMSZldmVudF90eXBlPUdJRl9UUkVORElORyZjaWQ9MDI5MWE0YzE0ZnRlYTYyZ3c4ZDEwYWIxMXUxeWFna2E2dm5oNGxuM3ZjZjJrandjJmN0PWdpZg&action_type=SENT"
    }
  },
  "tags": [],
  "is_anonymous": false,
  "is_community": false,
  "is_featured": false,
  "is_hidden": false,
  "is_indexable": false,
  "is_preserve_size": false,
  "is_realtime": false,
  "is_removed": false,
  "is_dynamic": false
}

Hi, not sure if I'm doing an import wrong or something, but I'm getting this error in my build-process:

[ warn ]  ./node_modules/@giphy/js-brand/dist/index.js
Critical dependency: the request of a dependency is an expression

TL;DR - your linked version of dompurify has a XSS vulnerability, updating to >=2.07 should fix it.
Got this report when I installed your package for a personal project:

                   === npm audit security report ===                            

Critical Cross-Site Scripting
Package dompurify
Patched in >=2.0.3
Dependency of @giphy/js-components
Path @giphy/js-components > @giphy/js-analytics > dompurify
More info https://npmjs.com/advisories/1205

Critical Cross-Site Scripting
Package dompurify
Patched in >=2.0.7
Dependency of @giphy/js-components
Path @giphy/js-components > @giphy/js-analytics > dompurify
More info https://npmjs.com/advisories/1223

Env

Node: v13.0.1
OS: Windows (Version 10.0.18363.778)
Package: @giphy\js-fetch-api (Version: 1.5.9)

To Reproduce

1. Have a basic node.js project set up
2. Run npm i @giphy\js-fetch-api
3. Run project

Code

const { GiphyFetch } = require("@giphy/js-fetch-api");
const giphy = new GiphyFetch("api key");
//...
const { data } = giphy.random();
console.log(data);

Error

(node:39764) UnhandledPromiseRejectionWarning: Error: fetch is not defined
    at new FetchError (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\fetch-error.js:21:28)
    at Object.<anonymous> (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:90:38)
    at step (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:33:23)
    at Object.next (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:14:53)
    at D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:8:71
    at new Promise (<anonymous>)
    at __awaiter (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:4:12)
    at makeRequest (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:52:48)
    at Object.request [as default] (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\request.js:101:27)
    at GiphyFetch.random (D:\Developement\mod-and-music\node_modules\@giphy\js-fetch-api\dist\api.js:104:33)
(node:39764) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:39764) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.  

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

in the SearchBar component, there is a search button and it is a default with no option to remove it. I think we can make it conditional to boolean props.

I can make a PR for this but I didn't find any PR guidelines. If there is any and you accept PR's please let me know

Motivation 🔦

the search button will not go with many designs, also as it's an ajax search we don't need the button.

https://github.com/Giphy/giphy-js/blob/master/packages/types/src/gif.ts#L49

original_mp4 is typed as IImage but not IMP4. I think IMP4 needs to extend IRendition and original_mp4 would just be IMP4.

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

I am trying to replicate the search and masonry grid from the official documentation using their Codesandbox example.

However, when I am trying to use it, the code is not returning any gifs back.

I have verified that the JS fetch is indeed returning back gifs, it seems that the grid is not calling the fetchGifs function.

I am hitting the same issue with Carousel component as well.

Codesandbox link for my implementation - https://codesandbox.io/s/cocky-waterfall-ny9rzk Component i was trying to use - Search and Grid from https://github.com/Giphy/giphy-js/tree/master/packages/react-components

Expected behavior 🤔

The grid and carousel should return gifs

Steps to reproduce 🕹

https://codesandbox.io/s/cocky-waterfall-ny9rzk

Screenshots or Videos 📹

No response

Platform 🌍

MacOS, Chrome

GIPHY-JS SDK version

5.9.2

TypeScript version

4.6.4

Additional context 🔦

No response

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Passing Object with noLink property to renderCarousel() still renders Gifs with anchor tags.

link to codepen, add noLink property and set it to true: codepen

import { GiphyFetch } from "@giphy/js-fetch-api";

const gf = new GiphyFetch("sXpGFDGZs0Dv1mmNFvYaGUvYwKX0PWIh");
const fetchGifs = (offset: number) => gf.trending({ offset, limit: 4 });

export const vanillaJSCarousel = (mountNode: HTMLElement) => {
  renderCarousel(
    {
      gifHeight: 200,
      user: {},
      fetchGifs,
      noLink: true,
      gutter: 6
    },
    mountNode
  );
};```

### Expected behavior 🤔

When passing `noLink: true` Gifs should render without anchor tags.

### Steps to reproduce 🕹

Steps:

1. call the renderCarousel function
2. pass in an Object with a noLink property


### Screenshots or Videos 📹

_No response_

### Platform 🌍

- OS [MacOS]
- browser [chrome]

### GIPHY-JS SDK version

"@giphy/js-brand": "1.1.7",     "@giphy/js-components": "3.0.5",     "@giphy/js-fetch-api": "1.5.9",     "@giphy/js-types": "2.0.1",     "@types/throttle-debounce": "1.1.1",

### TypeScript version

_No response_

### Additional context 🔦

_No response_

When I use the gf.gifs(string[]) API to fetch a list of gifs by IDs, it usually responds with all the gifs that I've requested but not always.

I've defined a simple function in my service layer that looks like this:

export const getGifsByIds = async (gifIds) => {
    console.log('ids:', gifIds);
    const { data } = await gf.gifs(gifIds);
    console.log('data', data);
    return data;
};

And below is a screenshot of those console log statements. I'm passing in an array of 6 gif Ids, but only 5 are being returned by gf.gifs().

The gifId that is missing in the results is gifIds[4] i.e. l0MYsHhzxfLsYfpPW. I've confirmed it is an existing GIF by visiting https://media.giphy.com/media/l0MYsHhzxfLsYfpPW/giphy.gif and sure enough it's some famous sportsball player.

Is the API working as expected or is this a bug? If it is working as expected, what is it about gif l0MYsHhzxfLsYfpPW that cannot be retrieved by gf.gifs()?

I've tried to implement @giphy/js-fetch-api in a Node script, but I'm getting errors regarding code that's "browser only" (window, new Headers(), etc).

Is the library intended to be for client-side JS only? - or is there Node support planned?

I have a website that I have only used JavaScript with, but I tried using TypeScript as per the example on CodeSandbox. The problem I am having is that the browsers are not compiling the code correctly. Some of the errors I have encountered are:
"chat.ts” was blocked because of a disallowed MIME type (“video/mp2t”)" //chat.ts is basically the same code as index.ts in the CodeSandbox example
After installing TypeScript through npm and creating the js files I get this error:
"ReferenceError: exports is not defined" in chat.js (source of error: Object.defineProperty(exports, "__esModule", { value: true });) This code was generated by running tsconfig.json in Visual Studio Code

I know how to program with TypeScript, but the problem is that I don't know how to compile in the browser. I've tried researching this but had no luck. What am I missing?

Something to look into is React Native support. Unable to get an iOS app running, comment out import { GiphyFetch } from '@giphy/js-fetch-api' and i am working again. Can use urls directly for now.
The issue was a build error in Xcode indicating "Can't find variable location".

ICategory gets exported, along with the Result types, but I'd like to be able to reference IGif directly. Thanks!

https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/src/result-types.ts

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

giphy-js makes analytics pingbacks and loads fonts from a remote server, and these behaviours are not configurable.

Expected behavior 🤔

These behaviours should be configurable (and ideally should be opt-in).

Steps to reproduce 🕹

Steps:

1. Use giphy-js in a project.
2. Observe connections to remote servers for analytics and loading of remote fonts.

Screenshots or Videos 📹

No response

Platform 🌍

All

GIPHY-JS SDK version

All

TypeScript version

All

Additional context 🔦

The lack of configurability of this functionality forces projects which care about their users privacy to apply patches, e.g. https://github.com/jitsi/jitsi-meet/pull/11457/files

https://github.com/Giphy/giphy-js/blob/master/packages/react-components/README.md contains broken links for pages:

Search
Trending 
GIF by ID
GIFs category and subcategory
Related Fetch
Random

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

giphy/react-components 5.13.0 attempts to download a file from https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64

My job's corporate proxy blocks it since it's not from npm.

$ npm i
npm ERR! code 1
npm ERR! path C:\Users<name>\Documents\workspace\morpheus-react\node_modules\cypress
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node index.js --exec install
npm ERR! Installing Cypress (version: 10.4.0)
npm ERR!
npm ERR! [STARTED] Task without title.
npm ERR! The Cypress App could not be downloaded.
npm ERR!
npm ERR! Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR!
npm ERR! Otherwise, please check network connectivity and try again:
npm ERR!
npm ERR! ----------
npm ERR!
npm ERR! URL: https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64
npm ERR! Error: unable to get local issuer certificate
npm ERR!
npm ERR! ----------
npm ERR!
npm ERR! Platform: win32-x64 (10.0.19042)
npm ERR! Cypress Version: 10.4.0
npm ERR! [FAILED] The Cypress App could not be downloaded.
npm ERR! [FAILED]
npm ERR! [FAILED] Does your workplace require a proxy to be used to access the Internet? If so, you must configure the HTTP_PROXY environment variable before downloading Cypress. Read more: https://on.cypress.io/proxy-configuration
npm ERR! [FAILED]
npm ERR! [FAILED] Otherwise, please check network connectivity and try again:
npm ERR! [FAILED]
npm ERR! [FAILED] ----------
npm ERR! [FAILED]
npm ERR! [FAILED] URL: https://download.cypress.io/desktop/10.4.0?platform=win32&arch=x64
npm ERR! [FAILED] Error: unable to get local issuer certificate
npm ERR! [FAILED]
npm ERR! [FAILED] ----------
npm ERR! [FAILED]
npm ERR! [FAILED] Platform: win32-x64 (10.0.19042)
npm ERR! [FAILED] Cypress Version: 10.4.0

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users<name>\AppData\Local\npm-cache_logs\2022-08-05T18_29_50_173Z-debug-0.log

Expected behavior 🤔

Doesn't attempt to download files outside npm

Steps to reproduce 🕹

Steps:

1. Apply for a job at my company
2. Get said job
3. Become a developer behind corporate proxy
4. Install @giphy/[email protected]

Screenshots or Videos 📹

No response

Platform 🌍

Windows 10, Rocky Linux OS

GIPHY-JS SDK version

n/a

TypeScript version

No response

Additional context 🔦

The problem is resolved with version 6.0.0. Technically, this bug is fixed, but I am posting this for other people so they do not have to go through what I went through to figure it out.

In Giphy docs there is Clips section.

In Type Option of Fetch API there is 'videos' type, though there is no 'videos' content type in docs.

Are 'clips' and 'videos' the same type? If not, what is the difference and why it's not listed in docs, and why there is no 'clips' type?

I'm trying to use the js-fetch-api to get a random GIF. On first execute, this works fine, but when trying to get another one, I just get the same result as the previous call. Almost like it's cached or something...

const data = await gf.random({
      tag: "thumbs up",
      type: "gifs",
      rating: "pg"
    });

What am I doing wrong here?
Issue reproduced here https://codesandbox.io/s/cold-bash-9o9sh

I have heard that API keys should not be passed to the client as they are then available to all visitors of the website. I am not sure how to avoid this because I need to instantiate the giphyFetch on the client side?

Trying to use @giphy/react-components with SSR causes this build error

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var e=require("@emotion/sheet"),r=t(require("@emotion/stylis"));function t(e){return e&&e.__esModule?e:{default:e}}require("@emotion/weak-memoize");var n="/*|*/",i=n+"}";function o(e){e&&a.current.insert(e+"}")}var a={current:null},s=function(e,r,t,s,c,u,d,l,f,p){switch(e){case 1:switch(r.charCodeAt(0)){case 64:return a.current.insert(r+";"),"";case 108:if(98===r.charCodeAt(2))return""}break;case 2:if(0===l)return r+n;break;case 3:switch(l){case 102:case 112:return a.current.insert(t[0]+r),"";default:return r+(0===p?n:"")}case-2:r.split(i).forEach(o)}},c=function(t){void 0===t&&(t={});var n,i=t.key||"css";void 0!==t.prefix&&(n={prefix:t.prefix});var o=new r.default(n);var c,u={};c=t.container||document.head;var d,l=document.querySelectorAll("style[data-emotion-"+i+"]");Array.prototype.forEach.call(l,function(e){e.getAttribute("data-emotion-"+i).split(" ").forEach(function(e){u[e]=!0}),e.parentNode!==c&&c.appendChild(e)}),o.use(t.stylisPlugins)(s),d=function(e,r,t,n){var i=r.name;a.current=t,o(e,r.styles),n&&(f.inserted[i]=!0)};var f={key:i,sheet:new e.StyleSheet({key:i,container:c,nonce:t.nonce,speedy:t.speedy}),nonce:t.nonce,inserted:u,registered:{},insert:d};return f},u=c;exports.default=u;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ^
ReferenceError: document is not defined
    at c (/my_project/node_modules/@giphy/js-brand/dist/index.js:10:795)
    at a (/my_project/node_modules/@giphy/js-brand/dist/index.js:22:444)
    at Object.parcelRequire.TAuN.create-emotion (/my_project/node_modules/@giphy/js-brand/dist/index.js:24:343)
    at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)
    at p (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:544)
    at Object.parcelRequire.ul02.emotion (/my_project/node_modules/@giphy/js-brand/dist/index.js:26:213)
    at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)
    at p (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:544)
    at Object.parcelRequire.7QCb../colors (/my_project/node_modules/@giphy/js-brand/dist/index.js:34:172)
    at f (/my_project/node_modules/@giphy/js-brand/dist/index.js:1:468)

Digging into it, it's coming from the @emotion dep (emotion/cache/index.js) and @giphy/js-brand comes prebuilt with the browser specific version.

You can work around it by turning the import into a conditional require but wanted to document this to see if this is a conscious decision.

As you provide React components, maybe you could do the same for the lovely Angular framework, too? :)

For example it could then widely use RxJS (for rerendering, etc) and Angular Http client and may safe a lot of bundle size while providing maximized performance using the Angular renderer.

Wasnt much of a problem to use your js-components, tho. Love that you made it in TypeScript!

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When a Gif component is focused and the user presses a key nothing happens

Expected behavior 🤔

When a Gif is focused and the user presses a key there should be a callback like onGifClick.
This would be good for accessibility. Instead of having to click a Gif the user could just press enter and trigger the same behavior

Steps to reproduce 🕹

Screenshots or Videos 📹

No response

Platform 🌍

All

GIPHY-JS SDK version

5.4.0

TypeScript version

No response

Additional context 🔦

No response

When building my react app using the default react-scripts production build I get failures in CI due to the following:

2:42:54 PM: Failed to compile.
2:42:54 PM: 
2:42:54 PM: ../node_modules/@giphy/js-brand/dist/index.js
2:42:54 PM: Critical dependency: the request of a dependency is an expression
2:42:54 PM: error Command failed with exit code 1.

Investigation has lead me to believe this is an issue with the giphy-js modules being bundled with parcel and CRA using webpack. Any suggestions on how to fix this?

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Breaking Changes:
https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html

npm install react-dom react
npm install --save-dev @types/react-dom @types/react

Motivation 🔦

incompatible with v18

Hi, thanks for these components!
I was trying to implement the Grid with search, so each time an input changes its value, the Grid should fetch.
Do you have an example of how to do this?
I tried to add key={searchTerm} to the grid but then I got a lot of state-updates that went wrong because old api responses came in.

UI for reference:

The callbacks onGifsFetched and onGifsFetchError for the web SDK in the js-components especially in the renderGrid function are optional and not called if the fetchGifs function does not return anything.

This makes it currently impossible for me to check and display a hint, if the query does not return any results.

I use Vue.js instead of React and therefore the native web components. I use it like this:

const fetchGifs = new GiphyFetch(apiKey).search(query, { ... })

renderCarousel({
    fetchGifs,
    onGifsFetched: (gifs) => {
        ...
    },
    onGifClick: (gif, event) => {
        ...
    },
    ...
})

• "@giphy/js-components": "^3.0.5"
• "@giphy/js-fetch-api": "^1.5.9"

GIFs in the grid are not keyboard accessible using tab since there is no tabindex set for them. While setting tabindex=0 using javascript fixes the issue, it would be nice if this was already present in the DOM element of the GIF's <div> tag to save the unnecessary JS query.

if you search for generic term like "hello world" the paginator (https://github.com/Giphy/giphy-js/blob/master/packages/fetch-api/src/paginator.ts) will issue fetch requests until all ~10,000 gifs are received.

There should be 1) a reasonable way to limit the overall number of results or 2) a way to tell the Carousel to call the paginator lazily as users scroll through it.

I am using the @giphy/js-components for my project. I implemented a search bar like this:

However, everytime I search for something, it does not clear the old search but populates below it.
This is an example:

I am using the "remove" function to remove the grid contents before performing a search
remove() {
if (this.el) {
this.el.parentNode.removeChild(this.el);
window.removeEventListener("resize", this.resizeRender, false);
this.el = null;
}
}

This is how I fetch the gifs:
export class VanillaJSGrid {
mountNode: HTMLElement;
el: HTMLElement;
resizeRender;
constructor(mountNode: HTMLElement, input: string) {
this.mountNode = mountNode;
inputSearch = input;
this.resizeRender = throttle(500, () => this.render());
window.addEventListener("resize", this.resizeRender, false);
this.render();
}

render = () => {
const width = getWidth();

this.el = renderGrid(
{
width,
fetchGifs,
columns: width < 500 ? 2 : 3,
gutter: 6,
user: {},
onGifClick: gif => console.log(gif.url)
},
this.mountNode
) as HTMLElement;
};
remove() {
if (this.el) {
this.el.parentNode.removeChild(this.el);
this.el = null;
}
}

searchGifs(look: string) {
this.remove();
inputSearch = look;
fetchGifs = (offset: number) => gf.search(look, { offset, limit: 10 });
this.render();
}
}

How to I reset the search using the JavaScript SDK?

Hi,

I am using nextjs and I am importing @giphy/react-components with SSR disabled; the component renders perfectly but giphyRandomID always return ""

I think it is the SSR but I don't know how to address this issue.

Any ideas?

Thank you

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

The JavaScript AbortController allows the cancellation of an in-flight fetch request. The current @giphy/js-fetch-api doesn't expose an option to pass an AbortController .abort() function or a signal to fetch itself.

Motivation 🔦

If this was integrated, SDK users would be able to abort in-flight requests (such as if the user starts a search, pauses, and then continues typing)

Hey,

I'm trying to disable attribution and gif links on the grid, but typescript is complaining that hideAttribution isn't a valid property in the options object, and I can't see a way of preventing the gifs automatically opening the giphy website?

Thanks!

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When using Grid component with the search function, I'm getting the below error whenever a new search term is entered:

"Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
at Grid"

Expected behavior 🤔

No response

Steps to reproduce 🕹

I'm only using Grid component with custom search input (no SearchContextManager) and passing the search term as states.

Screenshots or Videos 📹

No response

Platform 🌍

• all devices and browsers

GIPHY-JS SDK version

@giphy/react-components: ^5.4.0

TypeScript version

No response

Additional context 🔦

I tried using a debouncer but still got the same error. (the same error happens in your own example here #56 (comment))
I also tried using AbortController() in reques.ts, it didn't solve the issue.

The giphyRandomId variable is undefined as needed for the verification process:
https://developers.giphy.com/docs/sdk#verification

Using Angular 9.1.0

Hello, I got a warning when bundling my code with rollupjs (code still worked)

Circular dependencies
node_modules/@giphy/js-fetch-api/dist/index.js
-> node_modules/@giphy/js-fetch-api/dist/api.js
-> node_modules/@giphy/js-fetch-api/dist/request.js
-> node_modules/@giphy/js-fetch-api/dist/index.js

I see in the code, we can move this line

If it's ok I can make a PR.

Thanks!

I'm trying to install | npm install @giphy/react-components
but getting this error..

npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.10.2" from @giphy/[email protected]
npm ERR! node_modules/@giphy/react-components
npm ERR!   @giphy/react-components@"^3.0.7" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Importing ´import { renderGif } from '@giphy/js-components';orimport { GiphyFetch } from '@giphy/js-fetch-api';` in Angular results in a warning:

Warning: /....../giphy/giphy.component.ts depends on '@giphy/js-components'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Would be nice if both packages are bundled properly. Personally I use rollup for that.

The type definitions type the width and height as number

{
   "data":
   {
       "type": "gif",
       "id": "11ZSwQNWba4YF2",
       "url": "https://giphy.com/gifs/loop-work-programmer-11ZSwQNWba4YF2",
       "slug": "loop-work-programmer-11ZSwQNWba4YF2",
       "bitly_gif_url": "https://gph.is/2jt9RvW",
       "bitly_url": "https://gph.is/2jt9RvW",
       "embed_url": "https://giphy.com/embed/11ZSwQNWba4YF2",
       "username": "",
       "source": "https://www.reddit.com/r/perfectloops/comments/5qxdb2/the_work_of_a_programmer_l/",
       "title": "bug programmer GIF",
       "rating": "g",
       "content_url": "",
       "source_tld": "www.reddit.com",
       "source_post_url": "https://www.reddit.com/r/perfectloops/comments/5qxdb2/the_work_of_a_programmer_l/",
       "is_sticker": 0,
       "import_datetime": "2017-01-30 00:38:22",
       "trending_datetime": "0000-00-00 00:00:00",
       "images":
       {
           "downsized_large":
           {
               "height": "480",
               "size": "360614",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
               "width": "247"
           },
           "fixed_height_small_still":
           {
               "height": "100",
               "size": "2377",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100_s.gif",
               "width": "52"
           },
           "original":
           {
               "frames": "139",
               "hash": "4dd68be20d6aaad69a6efe697b4ec95e",
               "height": "480",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.mp4",
               "mp4_size": "86995",
               "size": "360614",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.webp",
               "webp_size": "183752",
               "width": "247"
           },
           "fixed_height_downsampled":
           {
               "height": "200",
               "size": "17281",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_d.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_d.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_d.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_d.webp",
               "webp_size": "12966",
               "width": "103"
           },
           "downsized_still":
           {
               "height": "480",
               "size": "360614",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy_s.gif",
               "width": "247"
           },
           "fixed_height_still":
           {
               "height": "200",
               "size": "5175",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200_s.gif",
               "width": "103"
           },
           "downsized_medium":
           {
               "height": "480",
               "size": "360614",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
               "width": "247"
           },
           "downsized":
           {
               "height": "480",
               "size": "360614",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.gif",
               "width": "247"
           },
           "preview_webp":
           {
               "height": "480",
               "size": "8468",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.webp",
               "width": "247"
           },
           "original_mp4":
           {
               "height": "932",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy.mp4",
               "mp4_size": "86995",
               "width": "480"
           },
           "fixed_height_small":
           {
               "height": "100",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.mp4",
               "mp4_size": "10186",
               "size": "50463",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100.webp",
               "webp_size": "40646",
               "width": "52"
           },
           "fixed_height":
           {
               "height": "200",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.mp4",
               "mp4_size": "18897",
               "size": "128398",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200.webp",
               "webp_size": "88210",
               "width": "103"
           },
           "downsized_small":
           {
               "height": "480",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-downsized-small.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-downsized-small.mp4",
               "mp4_size": "42230",
               "width": "246"
           },
           "preview":
           {
               "height": "480",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.mp4",
               "mp4_size": "42230",
               "width": "246"
           },
           "fixed_width_downsampled":
           {
               "height": "389",
               "size": "52675",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_d.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_d.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_d.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_d.webp",
               "webp_size": "26166",
               "width": "200"
           },
           "fixed_width_small_still":
           {
               "height": "195",
               "size": "5287",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w_s.gif",
               "width": "100"
           },
           "fixed_width_small":
           {
               "height": "195",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.mp4",
               "mp4_size": "17291",
               "size": "129812",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/100w.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=100w.webp",
               "webp_size": "86288",
               "width": "100"
           },
           "original_still":
           {
               "height": "480",
               "size": "17092",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy_s.gif",
               "width": "247"
           },
           "fixed_width_still":
           {
               "height": "389",
               "size": "14972",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w_s.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w_s.gif",
               "width": "200"
           },
           "looping":
           {
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-loop.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-loop.mp4",
               "mp4_size": "51732"
           },
           "fixed_width":
           {
               "height": "389",
               "mp4": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.mp4?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.mp4",
               "mp4_size": "32513",
               "size": "332239",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.gif",
               "webp": "https://media3.giphy.com/media/11ZSwQNWba4YF2/200w.webp?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=200w.webp",
               "webp_size": "188114",
               "width": "200"
           },
           "preview_gif":
           {
               "height": "480",
               "size": "14800",
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/giphy-preview.gif?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=giphy-preview.gif",
               "width": "247"
           },
           "480w_still":
           {
               "url": "https://media3.giphy.com/media/11ZSwQNWba4YF2/480w_s.jpg?cid=928bf3ad23d6e9db26e65b7b246eea266c0aa51b61b2e691&rid=480w_s.jpg",
               "width": "480",
               "height": "933"
           }
       }
   },
   "meta":
   {
       "status": 200,
       "msg": "OK",
       "response_id": "23d6e9db26e65b7b246eea266c0aa51b61b2e691"
   }
}

I noticed that the package.json files for the fetch api and react components only specify a "main" entry point and not a "modules" entry point, which means I can't tree shake out the bits I don't use. Ideally all libraries specified a module directive and we're declared as "side effect free" (not sure if the packages are actually side effect free) so my bundler can only pull in the bits I need.

Please find below an extract of my terminal while running npm start in a create-react-app project.

Compiled with warnings.

./node_modules/@giphy/js-brand/dist/index.js
Critical dependency: the request of a dependency is an expression

This is a problem, as project builds will fail because of this.
It does not look like a big issue to solve. But it would be really helpful. Thanks.

In @giphy/js-components render functions like renderGif and renderGrid need a static width. As a feature request I would like to have them be responsive with pure css 100% width, without the need of defining a static width in js, listening to window-resize and rerendering.

Hello,

I want to post a tweet with a giphy, tweet is scheduled and tweet post api v1 is forcing us to upload the gif.

after choosing the gif, I have tried to wget $gif.url but I get a web page. How can I use that component to post a Giphy on twitter using the twitter API in delayed (scheduled) ?

Thanks!

Following the readme file on the repo, I am not able to search for stickers.

My Code:
import { GiphyFetch } from '@giphy/js-fetch-api'
const gf = new GiphyFetch('your api key');
const { data: gifs } = await gf.search('dogs', { sort: 'relevant', lang: 'es', limit: 10, type: 'sticker' })

I am getting a 404 error.
API call made by SDK has the following URL:
https://api.giphy.com/v1/**sticker**/search?sort=relevant&lang=es&limit=10&type=sticker&q=dogs&api_key=MY_KEY

But if I try the API explorer on Docs page of Giphy, URL to search the stickers should be:
https://api.giphy.com/v1/sticker**s**/search?sort=relevant&lang=es&limit=10&type=sticker&q=dogs&api_key=MY_KEY

There is a 's' missing in the URL of API calls made by SDK.

Hi all!

I have a site where user posts text and giphy gifs, and I been saving those posts together with the giphy id
At the moment, in order to show them I'm creating this url:

const source = `https://media2.giphy.com/media/${giphyId}/giphy.gif`

I wonder how can I start using webp or mp4 formats instead.

Should I just change that url to end with ${giphyId}/giphy.webp? in that case, all the older years posted gifs should keep working with this new url?

Thanks

I'm working on a giphy integration for my app, and when I try to render, I get the invalid hook call error:

`Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.`

I have react and react-dom version 16.13.1. I know that the giphy components are using react 16.4 and I am wondering if there may be an issue with hooks not being supported by the giphy components? I tried it with a class component and got the same issue. The docs say: "Mismatching Versions of React and React DOM
You might be using a version of react-dom (< 16.8.0) or react-native (< 0.59) that doesn’t yet support Hooks."

My code:
`import React from 'react';
import PropTypes from 'prop-types';
import { GiphyFetch } from '@giphy/js-fetch-api';
import { Grid } from '@giphy/react-components';

const Giphy = () => {
const giphyFetch = new GiphyFetch('myAPIKey');
const fetchGifs = (offset) => giphyFetch.trending({ offset, limit: 10 });

return (
  <React.Fragment>
    <h3>Grid Example</h3>
    <Grid fetchGifs={fetchGifs} width={500} columns={3} />
  </React.Fragment>
);

};`