npmpackage.info

Gathering detailed insights and metrics for react-network-detect

Other packages similar to react-network-detect

@gm-network/detect-provider

0.3.6

gm-network sdk

@vyer-technologies/detect-network

2.1.11

Forked from @wora Detect Network

network-detect

1.0.1

NetworkDetect is a React component that detects changes in network connectivity and shows an offline UI.

react-native-vpn-detect

1.0.0

Checks for VPN on iOS

react-network-detect

react network detection hooks

1.0.11

MIT

TypeScript

1.12 kB

24,094

Installations

npm install react-network-detect

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.14.2

NPM Version

8.5.0 Score

53.5

Supply Chain

70.1

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

2

Closed

0

Merged

2

Issues

Open

0

Total

1

Closed

1

Releases

Unable to fetch releases

Contributors

Unable to fetch Contributors

View All 3 Contributors

Languages

TypeScript

JavaScript

TypeScript (94.78%)

JavaScript (5.22%)

Love this project? Help keep it running — sponsor us today! 🚀

Developer

geekskai

Download Statistics

Total Downloads

24,094

Last Day

Last Week

246

Last Month

2,308

Last Year

15,122

GitHub Statistics

MIT License

12 Stars

43 Commits

3 Forks

1 Watchers

3 Branches

3 Contributors

Updated on Dec 27, 2023

Bundle Size

2.49 kB

Minified

1.12 kB

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

1.0.11

Package Id

react-network-detect@1.0.11

Unpacked Size

5.29 kB

Size

2.54 kB

File Count

NPM Version

8.5.0

Node Version

16.14.2

Total Downloads

Cumulative downloads

Total Downloads

24,094

Last Day

-87.2%

Compared to previous day

Last Week

-56.8%

246

Compared to previous week

Last Month

77.4%

2,308

Compared to previous month

Last Year

117.8%

15,122

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-dom

Dev Dependencies

@babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript @types/react rollup rollup-plugin-babel rollup-plugin-terser rollup-plugin-typescript2 tslib typescript

react-network-detect

react network detection hooks

install

npm install react-network-detect

yarn add react-network-detect

demo

codesandbox

use

useOnlineEffect

import { useOnlineEffect } from 'react-network-detect';


function App() {
  const { isOnline } = useOnlineEffect();

  return (
    <div className="App">
     {
        isOnline?'this is online':'oh network error!'
     }
    </div>
  );
}

useNetworkStatus

import { useNetworkStatus } from 'react-network-detect';

const App = () => {
  const { effectiveConnectionType } = useNetworkStatus();

  let media;
  switch(effectiveConnectionType) {
    case 'slow-2g':
      media = <img src='...' alt='low resolution' />;
      break;
    case '2g':
      media = <img src='...' alt='medium resolution' />;
      break;
    case '3g':
      media = <img src='...' alt='high resolution' />;
      break;
    case '4g':
      media = <video muted controls>...</video>;
      break;
    default:
      media = <video muted controls>...</video>;
      break;
  }
  
  return <div>{media}</div>;
};

No vulnerabilities found.

No security vulnerabilities found.