@ajay_g/react-fetch

1.0.0 • Public • Published

React-Fetch-Hook

A simple react hook to consume REST API's.

NPM JavaScript Style Guide

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    1

Package Sidebar

Install

npm i @ajay_g/react-fetch

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

20.9 kB

Total Files

14

Last publish

Collaborators

  • ajay_g