react-optimized-fetcher

A restful api utility to manage states such as loading, error and data hassle free and doing catching of calls based on keynames passed down

Install

npm install --save react-optimized-fetcher

Usage

// in your index.js do the following
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { OptimizerProvider } from 'react-optimized-fetcher'

ReactDOM.render(
  <OptimizerProvider>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </OptimizerProvider>,
  document.getElementById("root")
);


// in your file where you want to use the fetcher call the following code, url can be anything
// param 1 = key-name/url e.g. https://jsonplaceholder.typicode.com/todos/1
// param 2(OPTIONAL) = time in milliseconds to recall the api automatically e.g. 10000 equals to 10 secs
// param 3(OPTIONAL) = pass in headers object of whatever headers you want to pass
import { useOptimizedFetcher } from 'react-optimized-fetcher';
function App() {
  const { status, data, error, isFetching, isLoading } = useOptimizedFetcher("https://jsonplaceholder.typicode.com/todos/1", 10000, {
    Authorization: 'Bearer 12345'
  });
  console.log(status, data, error, isFetching, isLoading);
  return (
    <div>
      <h1> Enjoy React-Optimized-fetcher </h1>
    </div>
  );
}
export default App;

// to programtically recall the api, just pass the same key-name/url in recallApi function
<button onClick={() => recallApi("https://api.github.com/users/octocat")}> Recall api </button>

License

MIT © UbaidRajputt