how to type a dynamic ref with generics?

Question

I want to be able to assign any html node to MutablerefObject. How is that done?

export type Components = {

    [component_id: string]: MutableRefObject<???>
}

const Overlay = () => {
    
    const ref = useRef<???|null>(null)

    return <div ref={ ref as HtmlDivElement } className={ clsx('absolute w-full h-full top-0 left-0 bg-green-200') }><div className='h-20 w-20'>asd</div></div>
}

Answer 1

To be able to assign any HTML node to a MutableRefObject, you can use the React.RefObject type from React. The RefObject type allows you to create a reference that can be used to store a reference to a DOM element or a React component.

Along that, also use the HTMLElement type. It represents an HTML element in the DOM and includes properties and methods that are common to all HTML elements.

import * as React from 'react';

export type Components = {
  [component_id: string]: React.MutableRefObject<HTMLElement | null>;
};

const Overlay = () => {
  const ref = React.useRef<HTMLElement | null>(null);

  return (
    <div
      ref={ref as React.RefObject<HTMLDivElement>}
      className={clsx('absolute w-full h-full top-0 left-0 bg-green-200')}
    >
      <div className="h-20 w-20">asd</div>
    </div>
  );
};