NavigationContextWrapper

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

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

Parameters

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

Returns

ReactElement

Usage example

Enrich Locations

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

<NavigationContextWrapper id={'footer'}>
<nav>
<a href={'/'}>Homepage</a>
<a href={'/privacy'}>Privacy</a>
<a href={'/contact'}>Contact</a>
</nav>
</NavigationContextWrapper>

Tracking via Render Props

import { 
NavigationContextWrapper,
trackHiddenEvent,
trackVisibleEvent
} from '@objectiv/tracker-react';

<NavigationContextWrapper id={'drawer'}>
{(trackingContext) => (
<Drawer
onShow={() => trackVisibleEvent(trackingContext)}
onHide={() => trackHiddenEvent(trackingContext)}
>
<a href={'/'}>Homepage</a>
<a href={'/privacy'}>Privacy</a>
<a href={'/contact'}>Contact</a>
</Drawer>
)}
</NavigationContextWrapper>

Did you know ?

NavigationContextWrapper internally uses LocationContextWrapper.