Giphy-mappr NPM

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;

@infinitebrahmanuniverse/nolb-gip @everything-registry/sub-chunk-1759 @zalastax/nolb-gip

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago