Dynamic HTML Tag in React Components with the "as" prop
Imagine you're building a reusable <Section>
component with React. The Section component renders an HTML <div>
tag because you hardcoded it. However, in some cases, you might want to use an other tag instead, for example a <section>
HTML tag.
This is a typical scenario when you want your HTML to be more semantic and SEO friendly.
The solution is to let the consumer decide which HTML tag should be used to render the component.
The "as" prop
This is nothing new.
It's an industry standard "approach" that allows you to dynamically decide which HTML tag should be used to render the component. A lot of React Components library use it, like Chakra UI and Material UI.
Without the "as" prop, you'd need to create separate components for each use case, and it makes no sense. Don't do it!
This is how you consume the "as" prop
import { Section } from './section';
const App = () => {
return (
<div>
<Section as="section">CTA</Section>
<Section as="article">My Article</Section>
<Section>This use the default HTML tag of the component</Section>
</div>
);
};
And this is the component definition
type SectionProps = {
as?: React.ElementType,
children: React.ReactNode,
}
export const Section = (props: SectionProps) => {
const { as: Tag = 'div', children } = props;
return <Tag>{children}</Tag>;
}
Typescript Support for the "as" prop
React helps us with Typescript types.
Using the typescript's React.ElementType
type, provided by React, you will obtain autocomplete for your IDE, like this
As an alternative to React.ElementType
you can use
type SectionProps = {
as?: keyof JSX.IntrinsicElements,
children: React.ReactNode,
}
or
type SectionProps = {
as?: keyof HTMLElementTagNameMap,
children: React.ReactNode,
}