React with Typescript -- Generics while using React.forwardRef

I discovered this question from reading this blog post, and I think there is a more straight-forward way of accomplishing this than the current accepted answer has proposed:

First we define an interface to hold the type of the component using something called a call signature in typescript:

interface WithForwardRefType extends React.FC<WithForwardRefProps<Option>>  {
  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<React.FC<WithForwardRefProps<T>>>
}

Notice how the function signature itself is declared as generic, not the interface - this is the key to making this work. The interface also extends React.FC in order to expose some useful Component properties such as displayName, defaultProps, etc.

Next we just supply that interface as the type of our component, and without having to specify the type of the props, we can pass that component to forwardRef, and the rest is history...

export const WithForwardRef: WithForwardRefType = forwardRef((
  props,
  ref?: React.Ref<HTMLDivElement>,
) => {
  const { options, onChange } = props;
  return (
    <div ref={ref}>
      {options.map((opt) => {
        return (
          <div
            onClick={() => {
              onChange(opt);
            }}
          >
            {opt.label}
          </div>
        );
      })}
    </div>
  );
});

Sandbox link here

References:

• https://stackoverflow.com/a/73795451/2089675

The most understandable answer:

import { Ref, forwardRef, useImperativeHandle } from 'react'

export interface ComponentRef {
  foo: VoidFunction
}

export type ComponentProps<T> = {
  data: T[]
}

const Component = <T,>(props: ComponentProps<T>, ref: Ref<ComponentRef>) => {
  const { data } = props

  const foo = () => {
    console.log(data)
  }

  useImperativeHandle(ref, () => ({
    foo: foo,
  }))

  return <div>{data.length}</div>
}

export default forwardRef(Component) as <T>(
  props: ComponentProps<T> & { ref?: Ref<ComponentRef> },
) => ReturnType<typeof Component>

Option 4 supports displayName if an interface is used for the return type of forwardRef.

import React from "react"

// Redecalare forwardRef
declare module "react" {
  function ComponentToRender<T, P>(props: P, ref: React.ForwardedRef<T>): React.ReactElement | null;
  ComponentToRender.displayName as string;

  function ForwardedComponent<T, P>(props: P & React.RefAttributes<T>): React.ReactElement | null;
  ForwardedComponent.displayName as string;

  function forwardRef<T, P = {}>(
    render: ComponentToRender<T, P>
  ): ForwardedComponent<T, P>;
}

Here is a easy way of doing it:

type PossibleValue = string | number | Record<string, unknown>;

type Props<TValue extends PossibleValue> = {
  value?: TValue | null;
};

function Selector<TValue extends PossibleValue>(
  { value, placeholder, onChange, options }: Props<TValue>,
  ref: ForwardedRef<View>,
) {    
  return (
    {...}
  );
}

export const Select = forwardRef(Selector);

I was looking for such simple adjustable example (from accepted answer):

type PropsWithForwardedRef<TProps, TRefComponent> = TProps & { forwardRef: React.ForwardedRef<TRefComponent> };

interface RadioGroupProps<TValue> {
    options: {value: TValue; label: string}[];
    onChange: (value: TValue) => void;
    // ...
}

class RadioGroupWithForwardedRef<TValue> extends React.PureComponent<PropsWithForwardedRef<RadioGroupProps<TValue>, HTMLDivElement>> {
    render() {
        return (
            <div ref={this.props.forwardRef}>
                {/* render */}
            </div>
        );
    }
}

export const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps<unknown>>(
    ({ children, ...props }, ref) => <RadioGroupWithForwardedRef {...props} forwardRef={ref}>{children}</RadioGroupWithForwardedRef>
) as <TValue>(p: RadioGroupProps<TValue> & { ref?: React.Ref<HTMLDivElement> }) => React.ReactElement;

All I needed is for props to be consistent in type and checked against each other - if options are given with string values, we require onChange for string value etc.

I've had to address this for MUI's Box component which conflicts with react-three/fiber. Casting is the most self-contained way I've found to handle this, and still allows all of MUI's complicated component type overrides to pass through. And using the named function

import _MuiBox from "@mui/material/Box";
import { OverrideProps } from "@mui/material/OverridableComponent";
import { BoxTypeMap } from "@mui/system";
import { forwardRef } from "react";

export type MuiBoxProps<
  RootComponent extends React.ElementType = BoxTypeMap["defaultComponent"],
  AdditionalProps = {},
> = OverrideProps<BoxTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
  component?: React.ElementType;
};

export const MuiBox = forwardRef(
  <RootComponent extends React.ElementType = BoxTypeMap["defaultComponent"], AdditionalProps = {}>(
    props: MuiBoxProps<RootComponent, AdditionalProps>,
    ref: React.Ref<unknown>,
  ) => {
    return (
      // PRAGMA: ts-ignore not normally required, but this hides the TS error
      // from react-three/fiber's Box clobbering MUI's.

      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      <_MuiBox {...props} ref={ref} />
    ) as React.ReactElement & { displayName?: string };
  },
);

MuiBox.displayName = "MuiBox";

Now you can do things like:

const muiImage = <MuiBox 
  component="img" 
  src="/myimg.jpg" 
  alt="A screengrab of a 1980s pop star" 
/>