Polymorphic Box component

Box.tsx

// https://github.com/ohansemmanuel/polymorphic-react-component

import React from "react";

type PolymorphicRef<TComponent extends React.ElementType> = React.ComponentPropsWithRef<TComponent>["ref"];

type AsProp<TComponent extends React.ElementType> = {
  as?: TComponent;
};

type PropsToOmit<TComponent extends React.ElementType, TProps> = keyof (AsProp<TComponent> & TProps);

type PolymorphicComponentProp<TComponent extends React.ElementType, TProps = {}> = React.PropsWithChildren<
  TProps & AsProp<TComponent>
> &
  Omit<React.ComponentPropsWithoutRef<TComponent>, PropsToOmit<TComponent, TProps>>;

type PolymorphicComponentPropWithRef<TComponent extends React.ElementType, TProps = {}> = PolymorphicComponentProp<
  TComponent,
  TProps
> & {
  ref?: PolymorphicRef<TComponent>;
};

export type BoxProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C>;

export type BoxComponent<TProps = unknown> = <C extends React.ElementType = "div">(
  props: BoxProps<C> & TProps,
) => React.ReactElement | null;

export const Box: BoxComponent = React.forwardRef(
  <TComponent extends React.ElementType = "div">(
    { as: component, ...props }: BoxProps<TComponent>,
    ref?: PolymorphicRef<TComponent>,
  ) => {
    const Component = component ?? "div";

    return <Component ref={ref} {...props} />;
  },
);