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​

typedefault value
requiredComponentElementType | keyof ReactHTML
optionalidstringinferred from native id, title or children
optionalwaitUntilTrackedbooleanfalse
optionalnormalizeIdbooleantrue
info
  • 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​

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>
Components how-to guides

Check these how-to guides for more thorough examples:


Did you know ?

TrackedPressableContext internally uses PressableContextWrapper.


See also