TrackedAnchor
Generates a <a>
Element wrapped in a LinkContext.
TrackedAnchor: (props: {
objectiv?: {
id?: string,
href?: string,
normalizeId?: boolean
waitUntilTracked?: boolean,
}
}) => <a>
objectiv
prop attributes
type | default value | ||
---|---|---|---|
optional | id | string | inferred from native id , title or children |
optional | href | string | inferred from native href |
optional | normalizeId | boolean | true |
optional | waitUntilTracked | boolean | false |
info
- When the
id
attribute is omitted, we attempt to infer it from one of the elements' native props:id
,title
,children
. - When the
href
attribute is omitted, we attempt to infer it from the anchor'shref
prop.
If either fails, an error will be logged to the Developer Console and the original Component is rendered.
Returns
<a>
Automatic Events
- PressEvent on
onClick
.
Usage example
import { TrackedAnchor } from '@objectiv/tracker-react';
<div>
<header>
<TrackedAnchor href={'/'}>Homepage</TrackedAnchor>
{/* Whenever inferring 'id' is not possible, we automatically look at `title` */}
<TrackedAnchor href={'/privacy'} title={'Privacy settings'}>
<img src="/lock.jpg"/>
</TrackedAnchor>
{/* Or `id`, either one will do the job */}
<TrackedAnchor href={'/profile'} id={'Profile settings'}>
<img src="/profile.jpg"/>
</TrackedAnchor>
</header>
<main>
...
</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 { TrackedAnchor } from '@objectiv/tracker-react';
<div>
<TrackedAnchor href={'/'} objectiv={{ normalizeId: false }}>Back to home</TrackedAnchor>
<TrackedAnchor href={'/privacy'} title={'Privacy settings'} objectiv={{ normalizeId: false }}>
<img src="/lock.jpg"/>
</TrackedAnchor>
<TrackedAnchor href={'/profile'} id={'Profile settings'} objectiv={{ normalizeId: false }}>
<img src="/profile.jpg"/>
</TrackedAnchor>
</div>
Did you know ?
TrackedAnchor
internally uses TrackedLinkContext.