Loadable Content

Installation

yarn add @procore/labs-loadable-content -E

Peer Dependencies

• styled-components ^5.0.1 is a peer dependency
• @procore/core-react ^8.24.0 is a peer dependency
• react ^16.12.0 is a peer dependency

yarn add styled-components -E

Exported items

See stories for more info

• OfflineProvider
• useOfflineContext
• OfflineBanner
• LoadableModalContent

Setup

To get started, wrap your application in a OfflineProvider. This will expose online/offline state to the rest of your application.

import * as React from 'react';
import { OfflineProvider } from '@procore/labs-loadable-content';

function Application1() {
  return (
    <OfflineProvider>
      <App />
    </OfflineProvider>
  );
}

The LoadableModalContent and OfflineBanner components requires:

• I18n.Provider for translations. Make sure to include 'core.labs.*' in your I18n translations

import * as React from 'react';
import { I18nProvider, Modal } from '@procore/core-react';
import {
  OfflineProvider,
  LoadableModalContent,
} from '@procore/labs-loadable-content';

function Application2() {
  return (
    <I18nProvider I18n={window.I18n}>
      <OfflineProvider>
        <Modal>
          <LoadableModalContent />
        </Modal>
      </OfflineProvider>
    </I18nProvider>
  );
}