Skip to main content

Polymorphic

Creating polymorphic components.

API​

type PolymorphicComponentProps<C extends React.ElementType, Props = {}> = InheritableElementProps<
    C,
    Props & AsProp<C>
>;
type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<C>["ref"];
type PolymorphicComponentPropsWithRef<
    C extends React.ElementType,
    Props = Record<string, unknown>,
> = PolymorphicComponentProps<C, Props> & { ref?: PolymorphicRef<C> };

Usage​

import { PolymorphicRef, PolymorphicComponentPropsWithRef } from '@feedzai/js-utilities';

type FlexProps<C extends React.ElementType> = PolymorphicComponentPropsWithRef<C, Props>;
type FlexComponent = <C extends React.ElementType = "p">(props: FlexProps<C>) => React.ReactElement | null;

const Flex: FlexComponent = React.forwardRef(
    <C extends React.ElementType = "div">(htmlProps: FlexProps<C>, ref?: PolymorphicRef<C>) => {
  ...
}