OverlayContextWrapper

Wraps its children in a OverlayContext.
Children can be a ReactNode or a Render Props function receiving TrackingContext.

OverlayContextWrapper: (props: {
  children: ReactNode | ((parameters: TrackingContext) => ReactNode),
  id: string
}) => ReactElement

Parameters​

type
requiredchildrenReactNode | ((parameters: TrackingContext) => void)
requiredidstring

Returns​

ReactElement

Usage example​

Enrich Locations​

import { OverlayContextWrapper } from '@objectiv/tracker-react';

<OverlayContextWrapper id={'modal'}>
  <Modal>
    ...
  </Modal>
</OverlayContextWrapper>

Tracking via Render Props​

import { 
  OverlayContextWrapper, 
  trackVisibility, 
  trackPressEvent
} from '@objectiv/tracker-react';

<OverlayContextWrapper id={'modal'}>
  {(trackingContext) => (
    <Modal 
      onToggle={() => trackVisibility(trackingContext)}
      closeButton={
        <button onClick={() => trackPressEvent(trackingContext)}>
          close
        </button>
      }
    >
      ...
    </Modal>
  )}
</OverlayContextWrapper>

Did you know ?

OverlayContextWrapper internally uses LocationContextWrapper.


See also