React-Fetch-Hook

A simple react hook to consume REST API's.

Install

npm install --save @ajay_g/react-fetch

yarn add @ajay_g/react-fetch

Usage

Fetching data on component render:

import React from "react";
import { useFetch } from "@ajay_g/react-fetch";

const GetUser = () => {
  const [loading, data, error] = useFetch("http://localhost:8080/user/1", {
    method: "GET",
    // ...other request options
  });

  if (loading) return "Loading...";

  return (
    <div>
      <p>{data.userName}</p>
    </div>
  );
};

Fetching data manually:

import React, {useState} from "react";
import { useLazyFetch } from "@ajay_g/react-fetch";

const GetAllPosts = () => {
  const [posts, setPosts] = useState([])
  const [getAllPosts, loading, error] = useLazyFetch("http://localhost:8080/posts",
  (response) => {
    console.log("response", response);
    setPosts(response)
  }
  {
    method: "GET",
    // ...other request options
  });

  if (loading) return "Loading...";

  return (
    <div>
      <button onClick={getAllPosts}>Get Users</button>
      {posts.map((item) => (
        <p>{item.title}</p>
      ))}
    </div>
  );
};

License

MIT © Ajay

This hook is created using create-react-hook.