Variable DynamicTag`Const`

DynamicTag: React.FC<DynamicTagProps> = ...

Renders any HTML element dynamically by accepting the tag name as a prop.

Description

Useful for polymorphic components where the rendered HTML element should vary based on context (e.g. heading level, semantic tag) without changing the component interface.

Param: tag

Any valid HTML tag name (e.g. 'div', 'span', 'h1', 'button')

Param: children

Content to render inside the element

Param: props

Any standard HTML attributes forwarded to the rendered element

Returns

A React element of the given tag type

Example

import { DynamicTag } from '@consumidor-positivo/ts-utils/react';

<DynamicTag tag="h2" className="title">Section Title</DynamicTag>

// Render semantic list items dynamically
const Tag = isHeader ? 'h1' : 'h2';
<DynamicTag tag={Tag}>Hello</DynamicTag>

Variable DynamicTagConst