Observe (get sized) control (listen to events) over a nested component in the react and typescript application via the forwardRef function

Issue

I have a functional component called MyDivBlock

const MyDivBlock: FC<BoxProps> = ({ }) => {
{getting data...}

return (
    <>
      <div className='divBlock'>
        {data.map((todo: { id: string; title: string }) => 
            <div key={todo.id}>{todo.id} {todo.title} </div>)}
      </div>
    </>
  );
};

I use it in such a way that MyDivBlock is nested as a child of

const App: NextPage = () => {
  return (
    <div>
      <Box >
        <MyDivBlock key="key0" areaText="DIV1" another="another"/>
      </Box>
    </div>
  )
}

Note that MyDivBlock is nested in Box and MyDivBlock has no ref attribute. This is important because I need to write Box code with no additional requirements for my nested children. And anyone who will use my Box should not think about constraints and ref attributes.

Then I need to get the dimensions of MyDivBlock in the code of Box component, and later attach some event listeners to it, such as scrolling. These dimensions and listeners will be used in the Box component. I wanted to use Ref to control it. That is, the Box will later observe changes in the dimensions and events of MyDivBlock by creating a ref-reference to them

I know that this kind of parent-child relationship architecture is implemented through forwardRef

And here is the Box code:

import React, { forwardRef, useImperativeHandle, useRef } from 'react';

export interface BoxProps extends React.ComponentProps<any> {
  children?: Element[];
  className: string;
}

export const Box: React.FC<BoxProps> = ({ children, ...rest }: BoxProps): JSX.Element => {
  const childRef = useRef<HTMLDivElement>();

  const ChildWithForwardRef = forwardRef<HTMLDivElement>((props, _ref) => {
    const methods = {
      show() {
        if (childRef.current) {
          console.log("childRef.current is present...");
          React.Children.forEach(children, function (item) {  
            console.log(item)})
          console.log("offsetWidth = " + childRef.current.offsetWidth);
        } else {
          console.log("childRef.current is UNDEFINED");
        }
      },
    };

  useImperativeHandle(_ref, () => (methods));

  return <div ref={childRef}> {children} </div>
  });
  ChildWithForwardRef.displayName = 'ChildWithForwardRef';

  return (
    <div
      className={'BoxArea'}>
      <button name="ChildComp" onClick={() => childRef.current.show()}>get Width</button>
      <ChildWithForwardRef ref={childRef} />
    </div>
  );
}

export default Box;

The result of pressing the button:

childRef.current is present... [...] $$typeof: Symbol(react.element) key: "key0" props: {areaText: 'DIV1', another: 'another'} [...] Object

offsetWidth = undefined

As you can see from the output, the component is visible through the created ref. I can even make several nested ones and get the same for all of them.

But the problem is that I don't have access to the offsetWidth and other properties.

The other challenge is how can I add the addEventListener? Because it works in pure Javascript with their objects like Element, Document, Window or any other object that supports events, and I have ReactChildren objects.

Plus I'm using NextJS and TypeScript.

Solution

Didn't dive too deep into the problem, but this may be because you are passing the same childRef to both div inside ChildWithForwardRef and to ChildWithForwardRef itself. The latter overwrites the former, so you have the method .show from useImperativeHandle available but not offsetWidth. A quick fix is to rewrite ChildWithForwardRef to use its own ref:

const ChildWithForwardRef = forwardRef<HTMLDivElement>((props, _ref) => {
  const ref = useRef<HTMLDivElement>()
    
  const methods = {
    show() {
      if (ref.current) {
        console.log("ref.current is present...");
        React.Children.forEach(children, (item) => console.log(item))
        console.log("offsetWidth = " + ref.current.offsetWidth);
      } else {
        console.log("ref.current is UNDEFINED");
      }
    },
  };
  useImperativeHandle(_ref, () => (methods));

  // Here ref instead of childRef
  return <div ref={ref}> {children} </div>
});

But really I don't quite get why you would need ChildWithForwardRef at all. The code is basically equivalent to this simpler version:

const Box: React.FC<BoxProps> = ({ children, ...rest }: BoxProps): JSX.Element => {
  const childRef = useRef<HTMLDivElement>();
  const showWidth = () => {
    if(childRef.current) {
      console.log("childRef.current is present...");
      React.Children.forEach(children, item => console.log(item))
      console.log("offsetWidth = " + childRef.current.offsetWidth);
    } else {
      console.log("childRef.current is UNDEFINED");
    }
  }

  return (
    <div className={'BoxArea'}>
      <button name="ChildComp" onClick={showWidth}>get Width</button>
      <div ref={childRef}>{children}</div>
    </div>
  );
}

Answered By - Alex Chashin