`tsx
import { ComponentPropsWithoutRef, createElement, ElementType } from 'react';
import { PolymorphicProps } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const HeadingDefaultElement: ElementType = 'h1';
// List of allowed HTML elements that can be passed via the "as" prop
export type HeadingAllowedElements = typeof HeadingDefaultElement | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type HeadingSizes = 1 | 2 | 3 | 4 | 5 | 6;

// Component-specific props
export type HeadingOwnProps = ComponentPropsWithoutRef & {
size?: HeadingSizes;
};

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type HeadingProps = PolymorphicProps<
HeadingOwnProps,
T,
HeadingAllowedElements
>;

export const Heading = ({
as = HeadingDefaultElement,
size,
className,
children,
...rest
}: HeadingProps) =>
createElement(
as,
{
...rest,
className: ${className} size-${size || 1},
},
children,
);
`

You can use the Heading component in your application as shown below:

`tsx
const App = () => (


`tsx
import { ComponentPropsWithoutRef, createElement, ElementType, forwardRef } from 'react';
import { PolymorphicProps, PolymorphicForwardedRef } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const HeadingDefaultElement: ElementType = 'h1';
// List of allowed HTML elements that can be passed via the "as" prop
export type HeadingAllowedElements = typeof HeadingDefaultElement | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type HeadingSizes = 1 | 2 | 3 | 4 | 5 | 6;

// Component-specific props
export type HeadingOwnProps = ComponentPropsWithoutRef & {
size?: HeadingSizes;
};

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type HeadingProps = PolymorphicProps<
HeadingOwnProps,
T,
HeadingAllowedElements
>;

const HeadingInner = (
{ as = HeadingDefaultElement, size, className, children, ...rest }: HeaadingProps,
// notice the use of the PolymorphicForwardedRef type here
ref: PolymorphicForwardedRef,
) =>
createElement(
as,
{
...rest,
ref,
className: ${className} size-${size || 1},
},
children,
);

// Forward refs with generics is tricky
// see also https://fettblog.eu/typescript-react-generic-forward-refs/
export const Heading = forwardRef(HeadingInner) as unknown as (
props: HeadingProps & { ref?: PolymorphicForwardedRef },
) => ReturnType;
`

Using the @axa-ch/react-polymorphic-types types will allow you to automatically infer the proper ref DOM node.

`tsx
const App = () => {
// The use of HTMLHeadingElement type is safe
const ref = useRef(null);

return (
ref={ref}
as='h2'
/>
);
};
`

`tsx
import { ComponentPropsWithoutRef, createElement, ElementType, forwardRef } from 'react';
import { PolymorphicProps, PolymorphicForwardedRef } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const HeadingDefaultElement: ElementType = 'h1';
// List of allowed HTML elements that can be passed via the "as" prop
export type HeadingAllowedElements = typeof HeadingDefaultElement | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type HeadingSizes = 1 | 2 | 3 | 4 | 5 | 6;

// Component-specific props
export type HeadingOwnProps = ComponentPropsWithoutRef & {
size?: HeadingSizes;
ref?: PolymorphicForwardedRef;
};

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type HeadingProps = PolymorphicProps<
HeadingOwnProps,
T,
HeadingAllowedElements
>;

const Heading = ({
as = HeadingDefaultElement,
size,
className,
ref,
children,
...rest
}: HeadingProps) =>
createElement(
as,
{
...rest,
ref,
className: ${className} size-${size || 1},
},
children,
);
`

Using the @axa-ch/react-polymorphic-types types will allow you to automatically infer the proper ref DOM node.

`tsx
const App = () => {
// The use of HTMLHeadingElement type is safe
const ref = useRef(null);

return (
ref={ref}
as='h2'
/>
);
};
`

`tsx
import { ComponentPropsWithoutRef, createElement, ElementType, memo } from 'react';
import { PolymorphicProps } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const HeadingDefaultElement: ElementType = 'h1';
// List of allowed HTML elements that can be passed via the "as" prop
export type HeadingAllowedElements = typeof HeadingDefaultElement | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
export type HeadingSizes = 1 | 2 | 3 | 4 | 5 | 6;

// Component-specific props
export type HeadingOwnProps = ComponentPropsWithoutRef & {
size?: HeadingSizes;
};

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type HeadingProps = PolymorphicProps<
HeadingOwnProps,
T,
HeadingAllowedElements
>;

const HeadingInner = ({
as = HeadingDefaultElement,
size,
className,
children,
...rest
}: HeadingProps) =>
createElement(
as,
{
...rest,
className: ${className} size-${size || 1},
},
children,
);

// Memo with generics is tricky
// see also https://fettblog.eu/typescript-react-generic-forward-refs/
export const Heading = memo(HeadingInner) as (
props: HeadingProps,
) => ReturnType;
`

The above component can be consumed without any additional overhead as follows:

`tsx
const App = () => (
<>


);
`

`tsx
import { ComponentPropsWithoutRef, createElement, ElementType, ExoticComponent } from 'react';
import { PolymorphicExoticProps, PolymorphicProps } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const ContainerDefaultElement: ElementType = 'div';
// List of allowed HTML elements that can be passed via the "as" prop
export type ContainerAllowedDOMElements = typeof ContainerDefaultElement | 'article' | 'section';
export type ContainerAllowedElements = ContainerAllowedDOMElements | ExoticComponent;

// Component-specific props
export type ContainerOwnProps = ComponentPropsWithoutRef;

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type ContainerProps = T extends ContainerAllowedDOMElements
? PolymorphicProps, T, ContainerAllowedDOMElements>
: PolymorphicExoticProps, T, ContainerAllowedDOMElements>;

export const Container = ({
as = ContainerDefaultElement,
className,
children,
...rest
}: ContainerProps) =>
createElement(
as,
{
...rest,
className,
},
children,
);
`

The above component works with straight HTML nodes or with external exotic components like, for example, the ones provided by framer-motion.

`tsx
import { motion } from 'framer-motion';

const App = () => (
<>

{/ Notice that the exotic props here will be automatically inferred /}
as={motion.article}
layout
/>

);
`

`tsx
import { ComponentPropsWithoutRef, createElement, ElementType, ExoticComponent, forwardRef } from 'react';
import { PolymorphicProps, PolymorphicForwardedRef, PolymorphicExoticProps } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const ContainerDefaultElement: ElementType = 'div';
// List of allowed HTML elements that can be passed via the "as" prop
export type ContainerAllowedDOMElements = 'div' | 'article' | 'section';
export type ContainerAllowedElements = ContainerAllowedDOMElements | ExoticComponent;

// Component-specific props
export type ContainerOwnProps = ComponentPropsWithoutRef;

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type ContainerProps = T extends ContainerAllowedDOMElements
? PolymorphicProps, T, ContainerAllowedDOMElements>
: PolymorphicExoticProps, T, ContainerAllowedDOMElements>;

// Forwarded ref component
const ContainerInner = (
{ as = ContainerDefaultElement, className, children, ...rest }: ContainerProps,
ref: PolymorphicForwardedRef,
) =>
createElement(
as,
{
...rest,
ref,
className,
},
children,
);

// Forward refs with generics is tricky
// see also https://fettblog.eu/typescript-react-generic-forward-refs/
export const Container = forwardRef(ContainerInner) as (
props: ContainerProps & { ref?: PolymorphicForwardedRef },
) => ReturnType;
`

With the above example, DOM nodes will be automatically inferred, including when using third-party exotic rendering functions.

`tsx
import { motion } from 'framer-motion';

const App = () => {
const div = useRef(null);
// Article and other HTML5 tags are just of type HTMLElement
const article = useRef(null);

return (
<>
ref={div}
as='div'
/>
ref={article}
as={motion.article}
layout
/>

);
};
`

`tsx
// We need to infer the functional component properties so 'any' is used in this case
// You can also add strict types for your functional components, but it will reduce flexibility
import { ComponentPropsWithoutRef, createElement, ElementType, ExoticComponent, FC } from 'react';
import { PolymorphicFunctionalProps, PolymorphicExoticProps, PolymorphicProps } from '@axa-ch/react-polymorphic-types';

// Default HTML element if the "as" prop is not provided
export const ContainerDefaultElement: ElementType = 'div';
// List of allowed HTML elements that can be passed via the "as" prop
export type ContainerAllowedDOMElements = 'div' | 'article' | 'section';
export type ContainerAllowedElements = ContainerAllowedDOMElements | ExoticComponent | FC;

// Component-specific props
export type ContainerOwnProps = ComponentPropsWithoutRef;

// Extend own props with others inherited from the underlying element type
// Own props take precedence over the inherited ones
export type ContainerProps = T extends ContainerAllowedDOMElements
? PolymorphicProps, T, ContainerAllowedDOMElements>
: T extends FC
? PolymorphicFunctionalProps, T, ContainerAllowedDOMElements>
: PolymorphicExoticProps, T, ContainerAllowedDOMElements>;

export const Container = ({
as = ContainerDefaultElement,
className,
children,
...rest
}: ContainerProps) =>
createElement(
as,
{
...rest,
className,
},
children,
);
`

Let's see how we can use the above component with all its possible rendering options:

`tsx
import { motion } from 'framer-motion';

type FooProps = ComponentPropsWithoutRef<'div'> & { size: 'small' | 'large'; name: string };

const Foo: FC = ({ className, size = 'large', ...rest }) => (
{...rest}
className={${className} the-foo ${size}}
/>
);

const App = () => (
<>

size='small'
name='foo'
as={Foo}
/>
as={motion.div}
layout
animate
/>

);
``