# use-fetch-lib > A simple React Hook that make rest api call easier. Latest version **2.2.3** (published 2020-10-01) · ISC license · 0 weekly downloads ## Install ```sh npm install use-fetch-lib pnpm add use-fetch-lib yarn add use-fetch-lib bun add use-fetch-lib ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.3 | | Published | 2020-10-01 | | First published | 2019-12-01 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 16.8 KB | | Known vulnerabilities | 0 (+25 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 10 | | Author | Kiran Bhalerao | | Maintainers | bhaleraok65 | | Keywords | react, react hooks, use-fetch, use-fetch-lib, api hooks, fetch hook | ## Links - npm: https://www.npmjs.com/package/use-fetch-lib - Repository: https://github.com/kiranbhalerao123/use-fetch-lib - Homepage: https://github.com/kiranbhalerao123/use-fetch-lib#readme - Issues: https://github.com/kiranbhalerao123/use-fetch-lib/issues - npm.io page: https://npm.io/package/use-fetch-lib ## Dependencies (1) - [axios](https://npm.io/package/axios.md) ^0.19.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 2.2.3 (latest) — 2020-10-01 - 2.2.2 — 2020-10-01 - 2.2.1 — 2020-10-01 - 2.2.0 — 2020-07-25 - 2.1.0 — 2020-05-19 - 2.0.0 — 2020-04-26 - 1.0.8 — 2020-03-29 - 1.0.7 — 2019-12-08 - 1.0.6 — 2019-12-08 - 1.0.5 — 2019-12-02 - 1.0.4 — 2019-12-01 - 1.0.3 — 2019-12-01 - 1.0.2 — 2019-12-01 - 1.0.1 — 2019-12-01 - 1.0.0 — 2019-12-01 ## README # use-fetch-lib 🔥 A simple React Hook that make rest api call easier\ Api calls without ~~Promise~~ or ~~async/ await~~ > **Note:** This is using the new [React Hooks API](https://reactjs.org/docs/hooks-intro.html) ## Install ``` $ npm i use-fetch-lib --save $ yarn add use-fetch-lib ``` ![Alt text](./src/code.png "Title") ## ✨ It features: - Simple and Lightweight - TypeScript ready - Support Data Mocking - SSR support - Request Cancellation on component unmount - Request Caching (In-Memory cache) - Local/Cache state mutation (update your data as you want) ## How to use https://github.com/kiranbhalerao123/use-fetch-lib-example use-fetch-lib exposes two named exports to us, - UseFetchProvider - useFetch 1️⃣ UseFetchProvider - UseFetchProvider is just a React component that help the `useFetch` to configure it properly. - Just wrap your parent component with `UseFetchProvider` - pass it, baseUrl(string) and authorizationToken(string|Function) ```jsx store.token)} > ``` 2️⃣ useFetch ```javascript const [{ data, status }, recall, updateState] = useFetch({ url: "/api/v1/employee/1", method: "get", shouldDispatch: true }); alternate syntax ♦️ const [{ data, status }, recall] = useFetch("/api/v1/employee/1"); // note: Default value of `shouldDispatch` is false ``` - This will get called on componentDidMount as we pass `shouldDispatch` true - it returns an array that we destruct as [{data, status}, recall] - `data` is an object return from Your api call - `status` active status of your api call, can be destruct as {isFulfilled, isPending, isRejected, isMocked, isCached, err} - `recall` it is a function to recall your api as you want - `updateState` is a function to update fetch state locally, it take callback function with preData as its arg. - ex. updateState((preData)=> updatedData) - **Cache** - You can cache your api req. by providing `cache: true` ```javascript const [{ data: Posts, status }] = useFetch({ url: "/posts", method: "get", cache: true, }); ``` - **Typescript** - we can pass generic types to `useFetch` ```javascript const [{ data: Posts, status: { isFulfilled } }, postTodoService] = useFetch({ url: "/posts", method: "post" }); ``` - useFetch Params 👇 | name | Type | Default | Required | Description | | ------------------ | ------------------------ | ------- | -------- | ------------------------------------------------------------------------------------------------------------------ | | url | string | | required | The request URL | | method | string | get | optional | The request method `'get', 'delete', 'post', 'put'` | | mockData | {} | | optional | This is default data for typescript types and api mocking | | shouldDispatch | () => boolean or boolean | false | optional | The conditions for auto run the service(on `componentDidMount`) | | cancelable | boolean | false | optional | Should cancel Api request on Component unmount | | shouldUseAuthToken | boolean | true | optional | if it is true it will send your authorizationToken with the request | | dependencies | Array | true | optional | This is dependencies array, if any of dependency get update them the service will re-call(on `componentDidUpdate`) | | before | () => void | | optional | This function will trigger before the api call triggers | | after | (state) => void | | optional | This function will trigger after the Api call | | alter | (state) => newState | | optional | With this function you can alter the api response as you want | | options | {} | | optional | The config options of Axios.js (https://goo.gl/UPLqaK) | --- _Source: https://npm.io/package/use-fetch-lib · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._