marinafetchreacthook

This is a custom hook that simplifies requests to the external API

Installing

Using npm:

$ npm i -S marinafetchreacthook

Example

// your API url 
const root_api = 'https://jsonplaceholder.typicode.com/posts';

// destructuring the object which returned by the custom hook
const { isLoading, isError, data } = useApi(root_api);

// where 
isLoading // true or false value
isError // true or false value
data // data object from your API

This way you can show different content inside your component depending on the values of that varaibles for example spinner when data is loading or error message when request failed with an error.

Example:

// inside your component

export default function Component() {
    const { isLoading, isError, data } = useApi(root_api);
    // your code 

    return (
        // your code 
        { data && data.map((item, index) => {
            // your code
        })}

        { isLoading && <div className="spinner"></div> }
        { isError && <div>Error...</div> }
    )
}