You may have noticed the âasâ prop when working with modern UI component libraries . Essentially the âasâ prop allows you to replace rendered HTML elements in a React component from the outside by passing them in as props :
Usually it is called âasâ prop, however, one can see it also as âcomponentâ, âelementâ, âvariantâ prop â or a combination of two of them. For example, one use case for using a combination of âcomponentâ and âvariantâ prop could be the following:
In this example, we have two headlines for two sections of an article. While both headlines should look the same in the article (variant), they should be semantically different (component), because there can only be one h1 HTML element on the page.
If you want to use TypeScript for the variant, component, or as prop, check out the following code snippet:
Thatâs it. Especially when you are creating in-house UI component libraries or design systems, these props become important when dealing with combinations of semantics and aesthetics.