GiphyMappr

GiphyMappr is a library that provides possibilities to get GIFs on Giphy.

Demo

Access to the demo by following this link :

Installation

Install GiphyMappr with npm

  npm install giphy-mappr

Importing

import GiphyMappr from 'giphy-mappr';

API Connection

// You can enter your API key as a parameter
const giphyMappr = new GiphyMappr("YOUR-API-KEY");

// You can leave it empty in order to use the one of the developer of the library
const giphyMappr = new GiphyMappr();

Get trending gifs

Allows to retrieve the list of trending Gifs.

• limit (Number, optional) => The maximum number of objects to return. (Default: “50”)

• rating (String, optional) => Filters results by specified rating. Acceptable values include g, pg, pg-13, r. If you do not specify a rating, you will receive results from all possible ratings.

//Get trending gifs without parameters
await giphyMappr.trending();

//Get trending gifs with parameters
await giphyMappr.trending(20, 'g');

Get gif(s) by ID

Allows to retrieve the list of trending Gifs.

• id (String, required) => Single Giphy gif string Id or array of string Id's

//Get trending gifs without parameters
await giphyMappr.id("ezjo4MgF112nB4PLYo");

//Get trending gifs with parameters
await giphyMappr.id(["ezjo4MgF112nB4PLYo", "hd3a7oOnV8BxHPZXvv"]);

Get gifs by search

Allows to retrieve the list of trending Gifs.

• query (Number, required) => Search query term or phrase. Adding "@" anywhere in the query parameter effectively changes the search query to be a search for a specific user’s GIFs (user has to be public and verified user by GIPHY.) Maximum length: 50 chars.

• limit (Number, optional) => The maximum number of objects to return. (Default: “50”)

• rating (String, optional) => Filters results by specified rating. Acceptable values include g, pg, pg-13, r. If you do not specify a rating, you will receive results from all possible ratings.

• lang (String, optional) => Specify default language for regional content; use a 2-letter ISO 639-1 language code.

//Get trending gifs without parameters
await giphyMappr.search("Hello World");

//Get trending gifs with parameters
await giphyMappr.search("Hello World", 20, 'g', "en");

Upload gifs

Upload gif on Giphy.

• username (String, require) => Your assigned username
• source_image_url (String, require) => The URL for the video you wish to upload in MP4 format
• tags (Array, optional) => Array with tags to be applied to the upload.

giphyMappr.upload("gcainjo", "https://images.all-free-download.com/footage_preview/mp4/closeup_of_cute_black_cat_yawning_and_washing_6892213.mp4", ["cat, animals"]);

Download gifs

Download gif from Giphy

• query (String optional), Search query term or phrase. If you use "id", leave "query" parameter blank ("")
• id (String optional), Single Giphy gif string Id or array of string Id's. If you use "query", leave "id" parameter blank ("")
• limit (Number optional), The maximum number of objects to download. (Default: 5).

giphyMappr.download("Hello world", "", 2);

Responses

Here is an response for a request containing a single gif

{
    "data": {
        "datetime": "2022-07-20 17:24:51",
        "id": "ezjo4MgF112nB4PLYo",
        "image": {
            "frames": "62",
            "hash": "7df9a86f11e62a9fc678df9c2b0bb6c1",
            "height": "270",
            "mp4": "https://media2.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.mp4?cid=1dfa1e56c5aa2196e34521786221d14271920ac0dbc3e4af&rid=giphy.mp4&ct=g",
            "mp4_size": "511129",
            "size": "4447480",
            "url": "https://media2.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.gif?cid=1dfa1e56c5aa2196e34521786221d14271920ac0dbc3e4af&rid=giphy.gif&ct=g",
            "webp": "https://media2.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.webp?cid=1dfa1e56c5aa2196e34521786221d14271920ac0dbc3e4af&rid=giphy.webp&ct=g",
            "webp_size": "1178268",
            "width": "480"
        },
        "rating": "g",
        "title": "Shake It Off Love Island GIF by PeacockTV",
        "type": "gif",
        "user": {
            "avatar_url": "https://media2.giphy.com/avatars/peacocktv/PvowQt7a9rwI.jpg",
            "banner_image": "https://media2.giphy.com/headers/peacocktv/tvcCClp3opPB.gif",
            "banner_url": "https://media2.giphy.com/headers/peacocktv/tvcCClp3opPB.gif",
            "profile_url": "https://giphy.com/peacocktv/",
            "username": "peacocktv",
            "display_name": "PeacockTV",
            "description": "The new streaming service from NBCUniversal. We're free (as a bird).",
            "is_verified": true,
            "website_url": "http://peacocktv.com/",
            "instagram_url": "https://instagram.com/peacocktv"
        }
    },
    "meta": {
        "msg": "OK",
        "status": 200,
        "response_id": "c5aa2196e34521786221d14271920ac0dbc3e4af"
    }
}

Here is an response for a request containing multiple gifs

{
    "data": [
        {
            "datetime": "2022-07-20 17:24:51",
            "id": "ezjo4MgF112nB4PLYo",
            "image": {
                "frames": "62",
                "hash": "7df9a86f11e62a9fc678df9c2b0bb6c1",
                "height": "270",
                "mp4": "https://media0.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.mp4?cid=1dfa1e56c621cd1b97cee7d252eaa761103ed750db5e6dc5&rid=giphy.mp4&ct=g",
                "mp4_size": "511129",
                "size": "4447480",
                "url": "https://media0.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.gif?cid=1dfa1e56c621cd1b97cee7d252eaa761103ed750db5e6dc5&rid=giphy.gif&ct=g",
                "webp": "https://media0.giphy.com/media/ezjo4MgF112nB4PLYo/giphy.webp?cid=1dfa1e56c621cd1b97cee7d252eaa761103ed750db5e6dc5&rid=giphy.webp&ct=g",
                "webp_size": "1178268",
                "width": "480"
            },
            "rating": "g",
            "title": "Shake It Off Love Island GIF by PeacockTV",
            "type": "gif",
            "user": {
                ...
            }
        },
        {
            "datetime": "2021-11-18 20:25:38",
            "id": "hd3a7oOnV8BxHPZXvv",
            "image": {
                "frames": "66",
                "hash": "c32631bccd3f5c308c45c3a42f0b4cbf",
                "height": "270",
                "mp4": "https://media4.giphy.com/media/hd3a7oOnV8BxHPZXvv/giphy.mp4?cid=1dfa1e56c621cd1b97cee7d252eaa761103ed750db5e6dc5&rid=giphy.mp4&ct=v",
                "mp4_size": "501204",
                "size": "4069534",
                "url": "https://media4.giphy.com/media/hd3a7oOnV8BxHPZXvv/giphy.gif?cid=1dfa1e56c621cd1b97cee7d252eaa761103ed750db5e6dc5&rid=giphy.gif&ct=v",
                "width": "480"
            },
            "rating": "",
            "title": "lisa barlow",
            "type": "video",
            "user": {
                ...
            }
        }
    ],
    "pagination": {
        "total_count": 2,
        "count": 2,
        "offset": 0
    },
    "meta": {
        "msg": "OK",
        "status": 200,
        "response_id": "c621cd1b97cee7d252eaa761103ed750db5e6dc5"
    }
}

Examples

import React, {useState, useEffect} from 'react';
import './App.css';

import GiphyMappr from 'giphy-mappr';

function App() {
  const [Gifs, setGifs] = useState()
  const giphyMappr = new Giphy-Mappr();

  useEffect(()=>{
    async function fetchData() {
      setGifs( await giphyMappr.trending(2))
    }
    fetchData();
  },[])
 
  return (
    <div className="App">
      <header className="App-header">

        {Gifs ?
          Array.isArray(Gifs.data) ?
            Gifs.data.map((el, key) => (
                  <img key={key} src={el.image.url} alt={el.title}></img>
              ))
            :
            <img src={Gifs.data.image.url} alt={Gifs.data.title}></img>
        : <></>
        }
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;