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:

Generic type support

TrackedInputContext doesn't yet support generic Components like other TrackedContexts HOCs.
We are working on a set of Input related HOCs to add this feature.

For the moment, only inputs and selects Elements are supported.

To track custom input components, check out the following how-to guides:

objectiv prop attributes

typedefault value
requiredComponentElementType | keyof ReactHTML
requiredidstring
optionalnormalizeIdbooleantrue
optionaltrackValuebooleanfalse
optionalstatelessbooleanfalse
optionaleventHandler'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

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

Did you know ?

TrackedInputContext internally uses InputContextWrapper.