Online status enhancer for Redux
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci
config
src
test
.babelrc
.eslintrc
.gitignore
.node-version
README.md
package.json
yarn.lock

README.md

redux-online-status

CircleCI Codecov npm version License

Online status enhancer for Redux.

yarn add redux-online-status

# or

npm i redux-online-status

Usage

example with react-notification-system-redux.

// store
import { createStore, applyMiddleware, compose } from 'redux'
import createOnlineStatusEnhancer from 'redux-online-status'

const store = createStore(
  rootReducer,
  initialState,
  compose(
    createOnlineStatusEnhancer(),
    applyMiddleware(...middlewares)
  )
)

// reducer
import { combineReducers } from 'redux'
import { reducer as online } from 'redux-online-status'
import { reducer as notifications } from 'react-notification-system-redux'

export default combineReducers({
  online,
  notifications,
})

// container component
import React, { PureComponent } from 'react'
import NotificationSystem, { warning, hide } from 'react-notification-system-redux'
import { connect } from 'react-redux'

@connect(({ notifications, online }) => ({ notifications, online }))
export default class Notifications extends PureComponent {
  componentWillReceiveProps(nextProps) {
    if (this.props.online === true && nextProps.online === false) {
      warning({ uid: 'OFFLINE', message: 'Your computer seems to be offline.', autoDismiss: 0, dismissible: false })
    }
    if (this.props.online === false && nextProps.online === true) {
      hide('OFFLINE')
    }
  }
  render() {
    return <NotificationSystem notifications={this.props.notifications} />
  }
}

License

MIT

© sugarshin