Gathering detailed insights and metrics for redux-if-offline
Installations
npm install redux-if-offlineDeveloper Guide
BETA
Typescript
No
Module System
CommonJS
Node Version
7.5.0
NPM Version
4.1.2
Score
68.5
Supply Chain
93
Quality
74.8
Maintenance
100
Vulnerability
100
License
Releases
Unable to fetch releases
Contributors
1
Download Statistics
Total Downloads
1,094
Last Day
1
Last Week
3
Last Month
7
Last Year
69
Bundle Size
768.00 B
Minified
337.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
0.9.1
Package Id
redux-if-offline@0.9.1
Size
24.84 kB
NPM Version
4.1.2
Node Version
7.5.0
Total Downloads
Cumulative downloads
Total Downloads
1,094
Last day
0%
1
Compared to previous day
Last week
50%
3
Compared to previous week
Last month
16.7%
7
Compared to previous month
Last year
-16.9%
69
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Versions
redux-if-offline
A super simple redux package (providing middleware and a reducer) to keep track of navigator online-offline status.
How do I get this?
Easy:
1yarn add redux-if-offline 2 3# if you don't have yarn 4npm install redux-if-offline
Cool how do I use it
When you set up your redux store, make sure you add our middleware (and reducer) to it
1const { createStore, applyMiddleware, combineReducers } = require('redux') 2const { OfflineMiddleware, OfflineReducer } = require('redux-if-offline') 3 4const store = createStore( 5 combineReducers({ 6 ...reducers, // Your reducers 7 reduxOffline: OfflineReducer // Optional 8 }), 9 applyMiddleware( OfflineMiddleware ) 10)
Alright, I set it up. What does it do
OfflineMiddleware is pretty straightforward
As soon as your redux store is setup, it'll dispatch an event with one of these types:
@@redux-if-offline/INIT/CONNECTED OR @@redux-if-offline/INIT/DISCONNECTED
While a user is using your app, if their internet connection ever disconnects, an action with one of these types is dispatched:
@@redux-if-offline/CONNECTED OR @@redux-if-offline/DISCONNECTED
You can have your own reducers catch these actions and update your state :)
However, to make it easier, you can use the OfflineReducer. It automatically matches on these types and sets a single boolean offline to be true or false:
In the exampe code above
reduxOffline: OfflineReducer
will automatically set reduxOffline.offline to be true or false accordingly
Example of using the reducer
1... 2 3store.subscribe( () => { 4 if(store.reduxOffline.offline) 5 console.log("I'm Offline") 6 else 7 console.log("I'm Online!") 8}) 9
With React
1import React from 'react' 2import { connect } from 'react-redux' 3 4class OfflineIndicator extends React.Component { 5 render(){ 6 return (this.props.state.reduxOffline.offline ? <div>You are currently offline. All messages sent will be cached and sent when you reconnect.</div> : null) 7 } 8} 9 10export default connect()(OfflineIndicator)
Why this package?
Well, checking if a browser is offline/online is rather simple (except for the cross-browser issues) and is non-business logic related code. As someone who strongly believes in the path of using the redux pattern in apps to only write business-logic code, and abstract everyting else away to middleware (for side-effects and such), this package is pretty important.
Moreover, the examples here don't do justice to the potential on top of a library this simple. There are a lot of things that can be done by checking the the browser is currently online/offline (indicators, caching API calls, alternative UI elements, etc.)
No vulnerabilities found.
No security vulnerabilities found.