react-hooks-giphy

react-hooks-giphy

Custom React Hooks for Axios.js

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 @use-hooks/axios

yarn

yarn add @use-hooks/axios

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]} />

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