React browser network status indicator

offline-indicator.js

const React = require('react');


class OfflineIndicator extends React.Component {
  constructor(props) {
    super(props);

    this.handleOffline = this.handleOffline.bind(this);
    this.state = { offline: false };
  }

  componentWillMount() {
    window.addEventListener('offline', this.handleOffline);
    window.addEventListener('online', this.handleOffline);
  }

  componentWillUnmount() {
    window.removeEventListener('offline', this.handleOffline);
    window.removeEventListener('online', this.handleOffline);
  }

  handleOffline(event) {
    this.setState({ offline: event.type !== 'online' });
  }

  render() {
    if (!this.state.offline) {
      return null;
    }

    return (
      <div className="hs-offline-indicator">
        Oops, looks like you are not connected to the internet.
      </div>
    );
  }
}


module.exports = OfflineIndicator;