TrackedPressableContext
HOC wrapping the given Component
in a PressableContext, enriching it with the objectiv
prop and automatically tracking PressEvent on onClick.
TrackedPressableContext: <T>(props: T & {
objectiv: {
Component: ElementType | keyof ReactHTML,
id?: string,
waitUntilTracked?: boolean,
normalizeId?: boolean,
}
}) => JSX.Element
objectiv
prop attributes
type | default value | ||
---|---|---|---|
required | Component | ElementType | keyof ReactHTML | |
optional | id | string | inferred from native id , title or children |
optional | waitUntilTracked | boolean | false |
optional | normalizeId | boolean | true |
- When the
id
attribute is omitted, we attempt to infer it from one of the anchor's native props:id
,title
,children
.
If that fails, an error will be logged to the Developer Console and the original Component is rendered.
Returns
JSX.Element
Automatic Events
- PressEvent on
onClick
triggers.
Usage example
Elements
A plain button tag. TrackedPressableContext will auto-detect id
from children
.
import { TrackedPressableContext } from '@objectiv/tracker-react';
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
objectiv={{
Component: 'button'
}}
>
Do it
</TrackedPressableContext>
When inferring an identifier from children
is not possible, TrackedLinkContext will look at title
or id
.
import { TrackedPressableContext } from '@objectiv/tracker-react';
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
title={'Do it'}
objectiv={{
Component: 'button'
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
id={'do-it'}
objectiv={{
Component: 'button'
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
When none of the above attributes is present, id
can be manually specified via the objectiv
prop.
import { TrackedPressableContext } from '@objectiv/tracker-react';
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
objectiv={{
Component: 'button',
id: 'do-it'
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
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 these examples the identifier, which would normally be do-it
, will be preserved as Do It
:
import { TrackedPressableContext } from '@objectiv/tracker-react';
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
objectiv={{
Component: 'button',
normalizeId: false
}}
>
Do it
</TrackedPressableContext>
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
title={'Do it'}
objectiv={{
Component: 'button',
normalizeId: false
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
id={'Do it'}
objectiv={{
Component: 'button',
normalizeId: false
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
<TrackedPressableContext<ComponentProps<'button'>>
onClick={ () => doIt() }
objectiv={{
Component: 'button',
id: 'Do It',
normalizeId: false
}}
>
<img src="/do-it.jpg"/>
</TrackedPressableContext>
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 Continue button.
import { Continue, ContinueProps } from './components/ui/buttons';
import {
TrackedPressableContext,
TrackedPressableContextObjectivProp
} from '@objectiv/tracker-react';
import React, { ComponentProps } from 'react';
export type TrackedContinueProps = ContinueProps & {
objectiv?: Omit<TrackedPressableContextObjectivProp, 'Component'>;
};
export const TrackedContinue = React.forwardRef<HTMLButtonElement, TrackedContinueProps>(
({ objectiv, ...nativeProps }, ref) => (
<TrackedPressableContext<ComponentProps<typeof Continue>>
{...nativeProps}
ref={ref}
objectiv={{
...objectiv,
Component: Continue
}}
/>
)
);
This can now be used like this:
<TrackedContinue onClick={ () => doIt() }>
...
</TrackedContinue>
<TrackedContinue objectiv={{ id: 'next' }} onClick={ () => doIt() }>
...
</TrackedContinue>
<TrackedContinue id={'next'} onClick={ () => doIt() }>
...
</TrackedContinue>
Check these how-to guides for more thorough examples:
TrackedPressableContext
internally uses PressableContextWrapper.