TrackedButton

Generates a <button> Element wrapped in a PressableContext.

TrackedButton: (props: {
  objectiv?: {
    id?: string,
    waitUntilTracked?: boolean,
    normalizeId?: boolean,
  }
}) => <button>
info
  • When the id attribute is omitted, we attempt to infer it from one of the elements' native props: id, title, children.

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

Parameters​

typedefault value
optionalidstringinferred from native id, title or children
optionalwaitUntilTrackedbooleanfalse
optionalnormalizeIdbooleantrue

Returns​

<button>

Automatic Events​

Usage example​

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

<div>
  <header>
    ...
  </header>
  <main>
    <TrackedButton onClick={ () => doIt() }>
      Do it
    </TrackedButton>

    <TrackedButton onClick={ () => doIt() } title={'Do it'}>
      <img src="/do-it.jpg"/>
    </TrackedButton>

    <TrackedButton onClick={ () => doIt() } id={'do-it'}>
      <img src="/button.jpg"/>
    </TrackedButton>
  </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 { TrackedButton } from '@objectiv/tracker-react';

<div>
  <TrackedButton onClick={ () => doIt() } objectiv={{ normalizeId: false }}>
    Do it
  </TrackedButton>

  {/* Whenever inferring 'id' is not possible, we automatically look at `title` */}
    <TrackedButton onClick={ () => doIt() } title={'Do it'} objectiv={{ normalizeId: false }}>
    <img src="/do-it.jpg"/>
  </TrackedButton>
    
  {/* Or `id`, either one will do the job */}
  <TrackedButton onClick={ () => doIt() } id={'Do it'} objectiv={{ normalizeId: false }}>
    <img src="/button.jpg"/>
  </TrackedButton>
</div>

Did you know ?

TrackedButton internally uses TrackedPressableContext.


See also