use-api-react

A simple react hook which returns the state of your api call

How to use

import { useApi } from "use-api-react";
import React from "react";

const Example = () => {
  const [{ isLoading, isSuccess, data, error, status }, callToApi] = useApi();

  const fetchUsersData = () => {
    try {
      const data = fetch("some api");

      return data;

      ***Return the data if you want that data to be returned by useApi hook***
    } catch (error) {

     ***Throw the error if you are interacting with your api in trycatch block***

     throw error;
    }
  };

  if(isLoading) return <h1>Loading</h1>
  if(error) return <h1>error occured</h1>

  return (
    <button
      onClick={() =>
        callToApi({ payload: apiPayload, apiFunc: fetchUsersData })
      }
    >
      Hey, make a call to api
    </button>
  );
};

export default Example;

How to use with redux or other state management libraries which has wrapper function around your api calls

Function which useApi returns accepts a parameter wrapperFunc, if you are using redux and needs to dispatch your api thunk function, you can add dispatch function to wrapperFunc key.

**If apiFunc doesn't return a promise, very likely your app will break. So apiFunc should always be a function which returns a promise

const dispatch = useDispatch()
 const [{ isLoading, isSuccess, data, error, status }, callToApi] = useApi();

  <button
      onClick={() =>
        callToApi({ payload: apiPayload, apiFunc: fetchUsersData, wrapperFunc: dispatch })
      }
    >
      Hey, make a call to api
    </button>

props

| Accepted props | Description | | -------------- | ---------------------------------------------------------------------- | | payload | payload that need to be passed to apiFunc | | apiFunc | function that interacts with api | | onSuccess | call back function which will be invoked after api call is successfull | | onfailure | call back function which will be invoked after api call fails | | wrapperFunc | wrapper function which will be wrapped around your api call |

| Returned props | Description | | -------------- | ---------------------------------------- | | isLoading | Can return true, false | | isSuccess | Can return null, true, false | | status | Can return "idle", "pending", "success", "rejected" | | data | data returned by api, will return null if api does not return anything | | error | error thrown by api, will return null if api does not return anything |