Trabajando Offline

Para los que quieren estar un poco más actualizados, este es el código de componente <IsOffline /> basado en Hooks.

import React, { memo, useState, useEffect } from "react";

const isOffline = ({ children }) => {
  const [online, setOnline] = useState(navigator ? navigator.onLine : true);

  useEffect(() => {
    if (!window) return;

    window.addEventListener("online", goOnline);
    window.addEventListener("offline", goOffline);

    return () => {
      window.removeEventListener("online", goOnline);
      window.removeEventListener("offline", goOffline);
    };
  });

  function goOnline() {
    setOnline(true);
  }

  function goOffline() {
    setOnline(false);
  }

  if (online) {
    return null;
  }

  return <span>{children}</span>;
};

export default memo(isOffline);

wowoooow

como se manipula ese html

En los archivos no está el código, por las dudas acá lo dejo

import React from 'react';

export default class IfOnline extends React.Component {
  constructor(props) {
    super(props)
    this.state = { onLine: navigator ? navigator.onLine : true }
  }

  componentDidMount() {
    if( ! window ) return

    window.addEventListener('online', this.goOnline)
    window.addEventListener('offline', this.goOffline)
  }

  componentWillUnmount() {
    window.removeEventListener('online', this.goOnline)
    window.removeEventListener('offline', this.goOffline)
  }

  goOnline = () => this.setState({ onLine: true })
  goOffline = () => this.setState({ onLine: false })

  render() {
    const { children } = this.props
    const { onLine } = this.state

    if( onLine ) return null

    return <span>{ children }</span>
  }
}

entre los archivos de la clase no está el componente IfOffline que se creo

¿Y en el caso de que se este usando SSR? ¿Cómo se bindearian los eventos al inicializarse el componente? ¿O cómo se detectaría el cambio?