Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dashed/react-offline
React component that notifies when browser is either offline or online.
https://github.com/dashed/react-offline
offline online react
Last synced: about 2 months ago
JSON representation
React component that notifies when browser is either offline or online.
- Host: GitHub
- URL: https://github.com/dashed/react-offline
- Owner: dashed
- License: mit
- Created: 2017-09-10T12:16:52.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-18T20:25:28.000Z (about 3 years ago)
- Last Synced: 2024-04-25T13:01:39.089Z (8 months ago)
- Topics: offline, online, react
- Language: JavaScript
- Size: 453 KB
- Stars: 10
- Watchers: 3
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-offline [](https://travis-ci.org/dashed/react-offline) [](https://www.npmjs.com/package/react-offline)
[](https://greenkeeper.io/)
> React component that notifies when browser is either offline or online.
## Install
```sh
yarn add react-offline
# or
npm install react-offline
```
## Usage
```js
// 3rd-party imports
import ReactDOM from "react-dom";
import React, { Component } from "react";
import Offline from "react-offline";
// function as child component
ReactDOM.render(
console.log({ isOffline, isOnline })}
>
{({ isOffline, isOnline }) => {
return isOffline ? (
{"I am offline"}
) : (
{"I am online"}
);
}}
,
mountNode
);
// render prop
ReactDOM.render(
console.log({ isOffline, isOnline })}
render={({ isOffline, isOnline }) => {
return isOffline ?
I am offline : I am online;
}}
/>,
mountNode
);
```
## Props
### `render` (optional)
An optional function that is called whenever the browser's network connectivity has changed (e.g. switching between online and offline).
The `render` function is invoked with an object argument: `({ isOffline, isOnline })`.
It's expected that `render` function returns a single React element.
This has same API semantics as [`React.Component.render()`](https://facebook.github.io/react/docs/react-component.html#render).
If `render` function is given, it has precedence over any given child component:
```js
{
return
"I take precedence over any function as child component.";
}}
>
{() => {
return "I will not render.";
}}
```
### Function as child component (optional)
Same as `render` prop function (see above).
If `render` function is not given, then the child component will be invoked as a function.
The child component function is invoked with an object argument: `({ isOffline, isOnline })`.
```js
{({ isOffline, isOnline }) => {
return isOffline ?
{"I am offline"} : {"I am online"};
}}
```
### `onChange` (optional)
An optional function that is called whenever the browser's network connectivity has changed (e.g. switching between online and offline).
The `onChange` function is invoked with an object argument: `({ isOffline, isOnline })`.
# License
MIT.