react-hooks-giphy

react-hooks-giphy

Super easy Giphy API support for ReactJS

Dependencies

Needs axios as a dependency

npm install --save axios

yarn

yarn add axios

Install

Note: Make sure that you have installed the correct version of react(>= v16.8.0) and react-dom(>= v16.8.0).

npm

npm install --save react-hooks-giphy

yarn

yarn add react-hooks-giphy

Demo

Live Show

Usage

import Giphy

import Giphy from "react-hooks-giphy";

Get random gif

<Giphy />

Get gif with a tag

<Giphy tag="happy" />

Pass in triggers to refresh with a new gif

<Giphy triggers={[triggers]} />

Configuring Options

Show gif title

const config = {
  title: true
};
<Giphy {...config} />;

Example

import React, { useState } from "react";
import ReactDOM from "react-dom";
import "./styles.css";

import Giphy from "react-hooks-giphy";

function App() {
  const [flag, triggerFlag] = useState(false);
  return (
    <div className="App">
      <h1>React Hooks Giphy</h1>
      <p> Random Gif </p>
      <Giphy />
      <p> Happy Gif </p>
      <Giphy tag="happy" />
      <p> Happy Gif with a trigger to refresh Gif</p>
      <Giphy tag="happy" triggers={[flag]} />
      <button onClick={() => triggerFlag(!flag)}>Get another gif</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Contribution

Make a PR

Development

Node >= v8 LTS

• Clone the project to local disk
• npm install
• npm start

License