Skip to content

You probably want to redirect a user to the login page or even display a dialog that asks your user to log in anytime a particular endpoint returns a 401 status code (unauthorized). use-network-status-code helps you keep track of the status code returned from the API, with this, you can easily write a component that controls the dialog based on …

Notifications You must be signed in to change notification settings

calebdeji/use-network-status-code

Repository files navigation

use-network-status-code

Hook created to keep track of the status code of all API calls made to some specific urls

npm downloads/month pullrequest

Install

npm install --save use-network-status-code

Concept

You probably want to redirect a user to the login page or even display a dialog that asks your user to login anytime a particular endpoint returns 401 status code (unauthorised). use-network-status-code helps you keep track of the status code returned from the api, with this, you can easily write a component that controls the dialog based on the status code.

Usage

import React, { useState, useEffect } from 'react';

import useNetworkStatus from 'use-network-status-code';

const authUserEndpoint = 'https://api-endpoint.com';
const authAdminEndpoint = 'https://api-admin-endpoint.com';
const loginEndpoint = 'https://api-admin-login-endpoint.com';

const CheckForNetworkStatusCodeAnd = () => {
	const { networkStatusCode, clearStatus } = useNetworkStatus({
		baseURLs: [authUserEndpoint, authAdminEndpoint], // accepts an array of urls through the baseURLs properties,
		excludingURLs: [loginEndpoint] //specifies the endpoint that matches one of the baseURLs but shouldn't be tracked
	});

	if (
		networkStatusCode[authUserEndpoint] === 401 ||
		networkStatusCode[authAdminEndpoint] === 401
	)
		return (
			<div>
				<p> Unauthorised </p>
				<button onClick={clearStatus}> Login </button>
			</div>
		);
	else if (
		networkStatusCode[authUserEndpoint] === 0 ||
		networkStatusCode[authAdminEndpoint] === 0
	)
		return <p> Seems you are not connected to the internet </p>;

	return <> </>;
};

Examples

Return Value description
networkStatusCode an object that contains the status code of the urls. The status code of each url can be accessed via networkStatusCode[url]
clearStatus accepts an array of urls or a url as a parameter. It resets the statusCode of the url(s) passed

License

MIT © calebdeji


This hook is created using create-react-hook.

About

You probably want to redirect a user to the login page or even display a dialog that asks your user to log in anytime a particular endpoint returns a 401 status code (unauthorized). use-network-status-code helps you keep track of the status code returned from the API, with this, you can easily write a component that controls the dialog based on …

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published