TrackedInput

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
optionalnormalizeIdbooleantrue
optionaltrackValuebooleanfalse
optionalstatelessbooleanfalse
optionaleventHandler'onBlur' | 'onChange' | 'onClick'onBlur
info
  • 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.

Returns​

ReactElement

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';

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

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';

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

Did you know ?

TrackedInput internally uses TrackedInputContext.


See also