https://github.com/leocardoso94/is-online-component

A simple react component that detect online and offline changes
https://github.com/leocardoso94/is-online-component

detection-network offline online react react-component

Last synced: about 1 year ago
JSON representation

A simple react component that detect online and offline changes

• Host: GitHub
• URL: https://github.com/leocardoso94/is-online-component
• Owner: Leocardoso94
• License: mit
• Created: 2018-06-20T19:07:56.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-07-13T12:31:28.000Z (almost 7 years ago)
• Last Synced: 2025-06-23T02:03:26.962Z (about 1 year ago)
• Topics: detection-network, offline, online, react, react-component
• Language: JavaScript
• Homepage:
• Size: 245 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

          
# is-online-component

![npm](https://img.shields.io/npm/dt/is-online-component.svg) [![Build Status](https://travis-ci.org/Leocardoso94/is-online-component.svg?branch=master)](https://travis-ci.org/Leocardoso94/is-online-component) [![](https://data.jsdelivr.com/v1/package/npm/is-online-component/badge)](https://www.jsdelivr.com/package/npm/is-online-component)

> A simple react component that detects online and offline changes

> Live demo [here](https://codesandbox.io/s/4ry12w6509)

![](https://raw.githubusercontent.com/Leocardoso94/is-online-component/master/docs/gif.gif)

## Usage

```bash

$ npm install is-online-component

# OR

$ yarn add is-online-component

```

```jsx

import React from 'react';

import IsOnline from 'is-online-component';

const handleChange = (isOnline) => {

  console.log(isOnline);

};

const App = () => (

  


    online}

      OfflineComponent={
offline
}

      onChange={handleChange}

    />

  

);


export default App;

```

[View demo here](https://codesandbox.io/s/4ry12w6509)

[![Edit is-online-component](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/4ry12w6509)

## Props

Following `props` are used while initialization

| Prop Name             | Type              | Description                                                                                    |

| --------------------- | ----------------- | ---------------------------------------------------------------------------------------------- |

| OnlineComponent `(optional)` | React.Component or String | the component that will be renderized when browser is online                                                                    |

| OfflineComponent `(optional)`    | React.Component or String | the component that will be renderized when browser is offline                                                                        |

| onChange `(optional)`   | Function  | function that will be called when the navigator be online or offline |