⚛ React.forwardRef

Example of a component that uses forwardRef:

import { ComponentPropsWithoutRef, forwardRef } from 'react'
import { clsx } from 'clsx'
import './Button.css'

interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
  isLoading?: boolean
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, children, isLoading, ...rest }, forwardedRef) => {
    const buttonClass = clsx(className, 'button', {
      'button--loading': isLoading,
    })

    return (
      <button className={buttonClass} {...rest} ref={forwardedRef}>
        {children}
      </button>
    )
  }
)

    

React TypeScript docs: https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/forward_and_create_ref/