react-offline
React component that notifies when browser is either offline or online.
Install
yarn add react-offline# or npm install react-offline
Usage
// 3rd-party imports ;; ; // function as child component ReactDOM; // render prop ReactDOM;
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()
.
If render
function is given, it has precedence over any given child component:
<Offline render= { return <div>"I take precedence over any function as child component."</div> ; }> { return <div>"I will not render."</div>; }</Offline>
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 })
.
<Offline> { return isOffline ? <div>'I am offline'</div> : <div>'I am online'</div>; }</Offline>
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.