Dynamic Tag Name Props

Allow users to pass in a tag name prop to a component as a string.

Code

JSX
function Component(props) {
  const { as = 'div', children } = props;

  const Tag = as;

  return <Tag>{children}</Tag>;
}

Usage

JSX
export default function App() {
  return (
    <Component as="section">
      {
        //    ...rest components
      }
    </Component>
  );
}

Last Updated:May 28, 2022