react-detect-offline - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "react-detect-offline",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Offline and Online components for React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -1,17 +0,43 @@
-Offline and Online components for React
+[![npm](https://img.shields.io/npm/v/react-detect-offline.svg)](https://www.npmjs.com/package/react-detect-offline)
+[![npm](https://img.shields.io/npm/l/react-detect-offline.svg)]()
+![gzip size](http://img.badgesize.io/https://unpkg.com/react-detect-offline?compression=gzip&label=gzip%20size)
+![size](http://img.badgesize.io/https://unpkg.com/react-detect-offline?label=size)
+![badges](https://img.shields.io/badge/badges-5-lightgrey.svg)
 
+### Offline and Online components for React
+
+Components that track [offline and online state](https://developer.mozilla.org/en-US/docs/Online_and_offline_events). Render certain content only when online (or only when offline).
+
 ```jsx
-import React from 'react';
 import { Offline, Online } from 'react-detect-offline';
 
-class App extends React.Component {
-  render() {
-    return (
-      <div className="App">
-        <Online>Did you know this page is available offline?</Online>
-        <Offline>You are currently offline.</Offline>
-      </div>
-    );
-  }
-}
+const App = () => (
+  <div>
+    <Online>Only shown when you're online</Online>
+    <Offline>Only shown offline (surprise!)</Offline>
+  </div>
+);
 ```
+
+### Demo
+
+Check out [chris.bolin.co/offline](https://chris.bolin.co/offline) for a simple example ([source code](https://github.com/chrisbolin/offline/blob/master/src/App.js)). As in this example, `react-detect-offline` pairs well with [`create-react-app`](https://github.com/facebookincubator/create-react-app), which creates offline-ready React apps out of the box.
+
+### API
+
+`<Online>` - Component that renders its children only when  the browser is online.
+
+`<Offline>` - Component that renders its children only when the browser is not online.
+
+**Note:** `Online` and `Offline` are mutually exclusive; if one is rendering, the other will not be.
+
+### Browser Support
+
+The [web spec](https://developer.mozilla.org/en-US/docs/Online_and_offline_events) we rely on is supported by IE 9+, Chrome 14+, Firefox 41+, and Safari 5+ - that's [94% of worldwide (98% of US)](http://caniuse.com/#feat=online-status) browser traffic.
+
+### Example Uses
+
+- Use `Offline` to remind users they might need to connect to complete certain actions.
+- Use `Online` to let readers know the page is available offline.
+- Use `Online` to hide links or other content that is irrelevant when offline.
+- idk, use your dang imagination.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69169

increased by4.2%

Number of package files

7

increased by16.67%

Number of lines in readme file

44

increased by144.44%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes