@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.

    Install

    npm i @ajay_g/react-fetch

    DownloadsWeekly Downloads

    4

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    20.9 kB

    Total Files

    14

    Last publish

    Collaborators

    • ajay_g