TrackedDiv
Generates a <div>
Element wrapped in a ContentContext.
TrackedDiv: (props: {
objectiv?: {
id?: string,
normalizeId?: boolean,
}
}) => HTMLDivElement
objectiv
prop attributes
type | default value | ||
---|---|---|---|
optional | id | string | inferred from native id or title |
optional | normalizeId | boolean | true |
info
- When the
id
attribute is omitted, we attempt to infer it from one of the elements' native props:id
ortitle
.
If that fails, an error will be logged to the Developer Console and the original Component is rendered.
Returns
HTMLDivElement
Automatic Events
None.
Usage example
import { TrackedDiv } from '@objectiv/tracker-react';
<TrackedDiv id={'content'}>
...
<TrackedDiv title={'details'}>
...
</TrackedDiv>
<TrackedDiv objectiv={{ id: 'wrapper' }}>
...
</TrackedDiv>
</TrackedDiv>
By default, all Tracked Elements automatically normalize their Context identifiers to a kebab-cased format.
This can be disabled via the normalizeId
option:
import { TrackedDiv } from '@objectiv/tracker-react';
<TrackedDiv id={'content'}>
...
<TrackedDiv id={'leave this as is'} objectiv={{ normalizeId: false }}>
...
</TrackedDiv>
<TrackedDiv objectiv={{ id: 'do not normalize', normalizeId: false }}>
...
</TrackedDiv>
</TrackedDiv>
Did you know ?
TrackedDiv
internally uses TrackedContentContext.