Skip to main content

Overlay

Installation​

$ yarn add @rexlabs/overlay

Usage​

import {
  useOverlay,
  OverlayProvider,
  OverlayContext,
  Overlay
} from '@rexlabs/overlay';

Irregularities​

The Overlay component will sometimes have to be rendered as a child of the TransitionList component from the @rexlabs/animation package because each child that we want to animate needs to be stacked and contained in it's own overlay.

function Dialogs() {
  return (
    <TransitionList>
      {dialogs.map((Dialog, index) => {
        return (
          <Overlay key={index}>
            <Dialog />
          </Overlay>
        );
      })}
    </TransitionList>
  );
}

This can be problematic because we don't actually want to animate the Overlay itself but rather the Dialog component here, so we fix this issue by cloning the child and forwarding the ref given to the Overlay to it. This ensures that the TransitionList knows to animate the child we actually care about, and we can still get all of the nice automatic backdrop and stacking functionality from the Overlay.

Copyright © 2021 Rex Software All Rights Reserved.