Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
react-detect-offline
Advanced tools
Components that track offline and online state. Render certain content only when online (or only when offline).
import { Offline, Online } from "react-detect-offline";
const App = () => (
<div>
<Online>Only shown when you're online</Online>
<Offline>Only shown offline (surprise!)</Offline>
</div>
);
Check out chris.bolin.co/offline for a simple example (source code).
<Online/>
and <Offline/>
- Components that render their children only when the browser is online/offline.
<Offline>You're offline right now. Check your connection.</Offline>
<Detector render={({ online }) => ...}/>
- Component that calls its render
prop every time the connection state changes. The render
prop is supplied with an object with an online
boolean value. Recommended for more complex cases, e.g. when styles need to be changed with connection status.
<Detector
render={({ online }) => (
<div className={online ? "normal" : "warning"}>
You are currently {online ? "online" : "offline"}
</div>
)}
/>
<Online/>
, <Offline/>
, and <Detector/>
accept the following props:
Prop | Type | Description | Default |
---|---|---|---|
polling | Obj or Bool | Config for polling fallback [1] | [see below] |
polling.enabled | Boolean | Force polling on or off | Depends on the browser [1] |
polling.url | String | URL to pool for connection status | "https://ipv4.icanhazip.com" |
polling.interval | Number | How often (in ms) to poll | 5000 |
polling.timeout | Number | How long (in ms) before timeout | 5000 |
onChange | Function | Called when connection changes | none |
children [2] | Element(s) | Children not Detector | none |
render [3] | Func | Render function Detector only | none |
[1] Polling is only used as a fallback for browsers that don't support the "online"
event. Currently these are Chrome on Windows, Firefox on Windows, and Chrome on Linux.
[2] <Online/>
and <Offline/>
only. <Detector/>
will not render children
.
[3] <Detector/>
only
The web spec we rely on is supported by IE 9+, Chrome 14+, Firefox 41+, and Safari 5+ - that's 94% of worldwide (98% of US) browser traffic. A polling fallback is used for browsers that don't implement the spec in a useful way (see note [1] in the above Props section).
This package is maintained by cwise89 (and was initially created by chrisbolin).
PRs are welcome!
yarn test
yarn build
. Make sure you commit the build file (dist/index.js
)FAQs
Offline and Online components for React
The npm package react-detect-offline receives a total of 10,404 weekly downloads. As such, react-detect-offline popularity was classified as popular.
We found that react-detect-offline demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.