Generates a <input> Element wrapped in a InputContext.

Special cases

As not all inputs behave the same way, we have ad-hoc components for specific ones:

TrackedInput: (props: {
objectiv?: {
id?: string,
normalizeId?: boolean,
trackValue?: boolean,
stateless?: boolean,
eventHandler?: 'onBlur' | 'onChange' | 'onClick'
}) => <input>

objectiv prop attributes

typedefault value
optionalidstringinferred from native id
optionaleventHandler'onBlur' | 'onChange' | 'onClick'onBlur
  • When the id attribute is omitted, we attempt to infer it from the elements' id native prop.

If that fails, an error will be logged to the Developer Console and the original Component is rendered.



Automatic Events

  • InputChangeEvent when eventHandler triggers. Tracking normally occurs only if value changed, unless stateless has been set to true.

Global Contexts

Usage example

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

<label for={'search'}>Search:</label>
<TrackedInput id={'search'} type={'search'} objectiv={{ trackValue: true }} />
<label for={'email'}>Email:</label>
<TrackedInput id={'email'} type={'email'} placeholder={'email address'} />

By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.

This can be disabled via the normalizeId option:

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

<TrackedInput id={'Email Address'} type={'email'} objectiv={{ normalizeId: false }} />

Did you know ?

TrackedInput internally uses TrackedInputContext.