TrackedInputContext

HOC wrapping the given Component in a InputContext, enriching it with the objectiv prop and automatically tracking InputChangeEvent when the given eventHandler triggers. Optionally track also input values as InputValueContext.

TrackedInputContext: <T extends ComponentProps<'input'> | ComponentProps<'select'>>(props: T & { 
  objectiv: {
    Component: ElementType | keyof ReactHTML,
    id: string,
    normalizeId?: boolean,
    trackValue?: boolean,  
    stateless?: boolean,
    eventHandler?: 'onBlur' | 'onChange' | 'onClick'
  }
}) => JSX.Element

Tracked Elements

We recommend using Tracked Elements if possible. They are based on TrackedInputContext and automate its configuration:

• <button>: TrackedButton
• <input type="text|email|number|search|date|tel">: TrackedInput
• <input type="radio">: TrackedInputRadio
• <input type="checkbox">: TrackedInputCheckbox
• <select> or <select multiple>: TrackedSelect

objectiv prop attributes

		type	default value
required	Component	ElementType | keyof ReactHTML
required	id	string
optional	normalizeId	boolean	true
optional	trackValue	boolean	false
optional	stateless	boolean	false
optional	eventHandler	'onBlur' | 'onChange' | 'onClick'	onBlur

Returns

JSX.Element

Automatic Events

• InputChangeEvent when the given eventHandler triggers. Tracking normally occurs only if values changed, unless stateless has been set to true. This may be useful for input types with fixed values, such as radio buttons.

Global Contexts

• One or more InputValueContexts with the changed values, if trackValue is set to true.

Usage example

Elements

Track InputChangeEvent whenever the email input value has changed onBlur

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

<TrackedInputContext
  type={'email'}
  objectiv={{ 
    Component: 'input',
    id: 'email'
  }}
/>

Track InputChangeEvent whenever the radio button is clicked

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

<TrackedInputContext 
  type={'radio'} 
  objectiv={{ 
    Component: 'input',
    id: 'add',
    eventHandler: 'onClick'
  }}
/>

Track also the value of the input, as InputValueContext

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

<TrackedInputContext
  type={'search'} 
  objectiv={{ 
    Component: 'input',
    id: 'search',
    trackValue: true
  }}
/>

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 first-name, will be preserved as First Name:

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

<TrackedInputContext
  objectiv={{ 
    Component: 'input',
    id: 'First Name',
    normalizeId: false
  }}
/>

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 Autocomplete search component.

import { Autocomplete, AutocompleteProps } from '../components';
import React from 'react';
import { TrackedContentContext } from '@objectiv/tracker-react';

export type TrackedAutocompleteProps = AutocompleteProps & {
  objectiv?: Omit<TrackedInputContextObjectivProp, 'Component'>;
};

export const TrackedAutocomplete = React.forwardRef<HTMLInputElement, TrackedAutocompleteProps>(
  ({ objectiv, ...nativeProps }, ref) => (
    <TrackedInputContext
      {...nativeProps}
      ref={ref}
      objectiv={{
        ...objectiv,
        Component: Autocomplete,
        id: objectiv?.id ?? 'autocomplete'
      }}
    />
  )
);

This can now be used like this:

<TrackedAutocomplete />

<TrackedAutocomplete objectiv={{ id: 'header-search' }} />

<TrackedAutocomplete id={'header-search'} />

Components how-to guides

Check these how-to guides for more thorough examples:

• Tracking Custom Components
• Tracking Third Party Components
• TrackedVideo how-to guide

Did you know ?

TrackedInputContext internally uses InputContextWrapper.

See also

• TrackedContentContext
• TrackedExpandableContext
• TrackedLinkContext
• TrackedMediaPlayerContext
• TrackedNavigationContext
• TrackedOverlayContext
• TrackedPressableContext
• TrackedRootLocationContext