react-requests-fetch

React Request Fetch Hook

The given dependency, [react-requests-fetch] is a ReactJS target library for handling http fetch requests considering bia-directional stateless and stateful data extraction. The same logic and parameters used when performing http requests using the fetch api are kept, with the difference in flexibility as to how data is retrieved. Data can be retrieved from any given source (api: precisely), either by initializing this hook when the component renders or is to render with statics variables, or dynamic variables within the source code, the same way as the react's use state hook is expected to be called.

---

Installation

npm i react-requests-fetch

yarn add react-requests-fetch

Note: IMPORTANT

Keep in mind this hook is two dimensional meaning it can compute automatically, with initial values or it can be computed dynamically with state values. Priority is given to the dynamic url therefore be aware when initiating the urls. Just like the local react hooks, the react-requests-fetch hook is called with two variable, the first being the response variable, and the second being the request variable. The first variable, handles response data and the second variable handles request data. Additionally, the parameter expectedResponseType, has been included to determine the type of response to be expected. from response payload. For text use text, for json use json. if left unassigned the default result expected shall be json format. The expectedResponseType targets the primitives response.json() or response.text().

Example: Implementation

import useRequestFetch from "react-requests-fetch";

const [response, setRequest] = useRequestFetch({
   uri: "https://restcountries.eu/rest/v2/all"
});

<button onClick={() => {
    setRequest({
        uri: "https://restcountries.eu/rest/v2/alpha/col"
    })
}}>Fetch Data</button>

<p>{response.loading && "Fetching..."}</p>
<pre>{JSON.stringify(response, null, 2)}</pre>

Expected payload

{
    "statusCode": 200,
    "loading": false,
    "payload": []
}

Expected params

Thesame, parameters expected in the fetch api are thesame parameters to be implemented with this hook.

Param	Description
method	The request method, e.g., GET, POST. The default is GET
headers	Any headers you want to add to your request, contained within a Headers object or an object literal with ByteString values.
body	Any body that you want to add to your request: this can be a Blob, BufferSource, FormData, URLSearchParams, USVString, or ReadableStream object. Note that a request using the GET or HEAD method cannot have a body.
mode	The mode you want to use for the request, e.g., cors, no-cors, same-origin, or navigate. The default is cors.
credentials	The request credentials you want to use for the request: omit, same-origin, or include. The default is same-origin.
cache	The cache mode you want to use for the request.
redirect	The redirect mode to use: follow, error, or manual. The default is follow
referrer	A USVString specifying no-referrer, client, or a URL. The default is about:client
integrity	Contains the subresource integrity value of the request (e.g., sha256-BpfBw7ivV8q2jLiT13fxDYAe2tJllusRSZ273h2nFSE=)

NOTE

The above table is a replica content from https://developer.mozilla.org/en-US/docs/Web/API/Request/Request. The Official site for fetch api in case any further information, please consult the site and get accurate variables required where needed.

Github https://github.com/mbugerald/react-requests-fetch