TrackedOverlayContext

HOC wrapping the given Component in a OverlayContext, enriching it with the objectiv prop and automatically tracking visibility events when isVisible changes.

TrackedOverlayContext: <T>(props: T & {
objectiv: {
Component: ElementType | keyof ReactHTML,
id: string,
normalizeId?: boolean,
isVisible?: boolean
}
}) => JSX.Element

objectiv prop attributes

typedefault value
requiredComponentElementType | keyof ReactHTML
requiredidstring
optionalnormalizeIdbooleantrue
optionalisVisiblebooleanundefined

Returns

JSX.Element

Automatic Events

caution

The isVisible state of a TrackedOverlayContext is ignored on mount. Only actual changes and tracked.

Usage example

Elements

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

<TrackedOverlayContext<ComponentProps<'div'>>
objectiv={{
Component: 'div',
id: 'modal'
}}
>
...
</TrackedOverlayContext>

ID normalization

By default, all Tracked Context Components automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option. This is useful when identifiers need to be preserved for cross-platform concerns or if they are standardized identifiers, e.g. a code from a backend API.

In this example the identifier, which would normally be login-modal, will be preserved as Login Modal:

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

<TrackedOverlayContext<ComponentProps<'div'>>
objectiv={{
Component: 'div',
id: 'Login Modal',
normalizeId: false
}}
>
...
</TrackedOverlayContext>

Components

The Component prop doesn't need to be a JSX Element. Actually, more often than not, it will probably be another Component.
Here is an example of how to wrap around a hypothetical Modal component.

import { Modal, ModalProps } from '../components';
import React, { ComponentProps } from 'react';
import { TrackedOverlayContext, TrackedShowableContextObjectivProp } from '@objectiv/tracker-react';

export type TrackedModalProps = ModalProps & {
objectiv?: Omit<TrackedShowableContextObjectivProp, 'Component'>;
};

export const TrackedModal = React.forwardRef<HTMLDivElement, TrackedModalProps>(
({ objectiv, ...nativeProps }, ref) => (
<TrackedOverlayContext<ComponentProps<typeof Modal>>
{...nativeProps}
ref={ref}
objectiv={{
...objectiv,
Component: Modal,
id: objectiv?.id ?? 'modal'
}}
/>
)
);

This can now be used like this:

<TrackedModal>
...
</TrackedModal>

<TrackedModal objectiv={{ id: 'login-modal' }}>
...
</TrackedModal>

<TrackedModal id={'login-modal'}>
...
</TrackedModal>

Did you know ?

TrackedOverlayContext internally uses OverlayContextWrapper.