redux-network-status v1.0.2

redux-network-status

npm install --save redux-network-status 

redux-network-status is a simple redux library that shows an alert when the browser lost connectivity.

When the browser goes offline an action is dispatched, when it returns online another action is dispatched.

Usage

Step 1 : add redux-network-status reducer to your reducers

import {combineReducers} from 'redux';

import {networkStatusReducer} from 'redux-network-status';

const reducers = combineReducers({
  ...networkStatusReducer
  //,yourOtherReducers
});

Notice I used the spread operator to add the redux-network-status, this is because networkStatusReducer is an Object that looks like this:

{network: reducer}

Where network is the redux state object we map with the reducer, and reducer is the actual reducer function. ...networkStatusReducer is a short version for {[networkStatusReducer.network], networkStatusReducer.reducer}. In order to use redux-network-status, the state object associated with the reducer MUST be called network.

Step 2 : add network listener to your redux store

import {createStore} from 'redux';
import { reduxNetworkStatus } from 'redux-network-status';


const store = createStore(reducers);

reduxNetworkStatus( store );

Step 3 : Add the component to you app.

import { render } from 'react-dom';
import NetworkStatus from 'redux-network-status';

const App = <Provider store={store}>
        <div className="wrapper">
            <h2>Redux network status.</h2>
            <p>Redux library that warns you when you're network offline</p>
            <NetworkStatus />
        </div>
    </Provider>
    
    
const target = document.getElementById( 'app' );

render(App, target );

Putting all togheter will result in something like

import React from 'react'
import { render } from 'react-dom';
import { combineReducers, createStore } from 'redux';
import {Provider} from 'react-redux';
import NetworkStatus, { networkStatusReducer, reduxNetworkStatus } from 'redux-network-status';

const reducers = combineReducers( {
    ...networkStatusReducer
} );


const store = createStore( reducers );

reduxNetworkStatus( store );

const App = ( <Provider store={store}>
    <div className="wrapper">
        <h2>Redux network status.</h2>
        <p>Redux library that warns you when you are network offline</p>
        <NetworkStatus />
    </div>
</Provider> )


const target = document.getElementById( 'app' );

render( App, target );

You won't put all this stuff togheter, because you will split it in multiple files, have a look at the development dir to better understand how to split.

Step 4 : customize

You can customize what the component will render. To do that you can use the render prop of the component NetworkStatus. example:

 <NetworkStatus render={(props)=> (<div> The browser is: {props.online ? 'online' : 'offline'}.</div>)}/>

Step 5 : intercept

When browser network status changes, an action is dispatched, the action looks like this:

//if offline
{type: "@@redux-network-status::change-status", online: false}

//if online
{type: "@@redux-network-status::change-status", online: true}

run locally

git clone https://github.com/Spyna/redux-network-status.git && cd redux-network-status;
npm install && npm run dev

will appear on http://localhost:5000, use browser devTools to remove/restore network comunication. Or, if you prefer, switch off WIFI or pull the network cable off.

PropTypes and Defaults

PropTypes

static propTypes = {
        offlineText : PropTypes.string,
        containerStyle : PropTypes.object,
        containerClass : PropTypes.string,
        online : PropTypes.bool,
        render : PropTypes.func
    }

• offlineText : text you want to appear in the alert
• containerStyle : style object you want to set. Overrides the default style
• containerClass : css class you want to give to the container
• online : if false the alert displays. You won't pass this prop, because redux will do it!
• render : a function that will return the actual content of the alert. function has a props parameter, that is the react props of the Component. You can play with them.

DefaultProps

 static defaultProps = {
        offlineText: 'Looks like you are offline',
        containerStyle: style,
        containerClass: 'redux-network-status-container',
        online : true
    }

Running the test suite

npm test

Steps to submit a PR

Pull requests are welcome. You can add an Issue, add detailed information, next create a pull request.

A changelog