https://github.com/geekskai/react-network-detect

react network detection hooks
https://github.com/geekskai/react-network-detect

Last synced: about 1 year ago
JSON representation

react network detection hooks

• Host: GitHub
• URL: https://github.com/geekskai/react-network-detect
• Owner: geekskai
• License: mit
• Created: 2022-06-10T13:06:26.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2022-08-13T03:12:58.000Z (almost 4 years ago)
• Last Synced: 2025-03-18T20:48:59.738Z (about 1 year ago)
• Language: TypeScript
• Size: 314 KB
• Stars: 12
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-network-detect

![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-network-detect)

[![GitHub license](https://img.shields.io/github/license/geekskai/react-network-detect)](https://github.com/geekskai/react-network-detect/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/v/react-network-detect.svg)](https://www.npmjs.com/package/react-network-detect)

[![npm downloads](https://img.shields.io/npm/dm/react-network-detect.svg)](https://www.npmjs.com/package/react-network-detect)

[![GitHub stars](https://img.shields.io/github/stars/geekskai/react-network-detect)](https://github.com/geekskai/react-network-detect/stargazers)

### react network detection hooks

> If you think it's good, please give a star, this will be the motivation for me to continue to work hard, thank you very much.

## install

`npm install react-network-detect`

or

`yarn add react-network-detect`

## demo 

[codesandbox](https://codesandbox.io/s/awesome-lovelace-f9g8lf?file=/src/App.tsx)

## use

###  useOnlineEffect 

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

```

function App() {

  const { isOnline } = useOnlineEffect();

  return (

    


     {

        isOnline?'this is online':'oh network error!'

     }

    

  );

}


```

###  useNetworkStatus

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

```

const App = () => {

  const { effectiveConnectionType } = useNetworkStatus();

  let media;

  switch(effectiveConnectionType) {

    case 'slow-2g':

      media = ;

      break;

    case '2g':

      media = ;

      break;

    case '3g':

      media = ;

      break;

    case '4g':

      media = ...;

      break;

    default:

      media = ...;

      break;

  }

  

  return 
{media}
;

};

```