Problem forwarding ref in ResponsiveContainer

[abforce]

In the following line, you should return containerRef.current not containerRef itself.

recharts/src/component/ResponsiveContainer.tsx

Line 72 in 4582d90

useImperativeHandle(ref, () => containerRef, [containerRef]);

[ckifer]

this is known, see #2784

Its a breaking change so there is a PR ready to go for this change in 3.0

Going to close this, thanks

[ckifer]

Going to re-open this as a place to track rather than the PR

[blerner]

In the meantime, it appears (if I'm reading this correctly) that 3773b9b introduced a breaking type error: before, ref had type Ref<unknown>, but now it has type Ref<HTMLDivElement>, which is wrong -- it needs to be Ref<RefObject<HTMLDivElement>>. In my code I currently have

  const chartRef = useRef<RefObject<HTMLDivElement>>(undefined);
  ...
        <ResponsiveContainer
          ref={chartRef} // LINE 1
          className="d-inline-block p-0 m-0"
          width="50%"
          height={30 + (buckets.length * 40)} // 30 is axis default height
        >
             .....
              const parentRect = chartRef.current?.current?.getBoundingClientRect(); // LINE 2
            ....

and either Line 1 or Line 2 causes a type error. If I change the type declaration for chartRef to be useRef<HTMLDivElement> (which is what's suggested as the breaking change for 3.0), then Line 2 is wrong; if I leave it as is, then Line 1 is wrong.

My workaround for now is ref={chartRef as unknown as Ref<HTMLDivElement>), which is janky, but seems necessary given the change in the commit above.

[ckifer]

To be honest I would just not type your ref until this is fixed

useRef(undefined) which will implicitly use any

I'd really like to just fix this and release a 'breaking' change in a minor so that it is corrected, but there are too many consumers who now have something like the above implemented meaning we break every instance of that.

We can remove these types in the next release which should change the prop back to unknown

CC @HHongSeungWoo

[HHongSeungWoo]

I didn't consider type issue.
I'll open a pull request to resolve this problem, so please share your thoughts.

[justrealmilk]

So can someone explain to me how to access and use a ref with the ResponsiveContainer component because 98% of renders it's undefined and the rest it's this nested rubbish and the only way I can think of to mitigate this is an anti pattern

[ckifer]

Not sure what you mean about 98% of the time it's undefined but I think on the next release @HHongSeungWoo 's change should be out and you should be able to access things normally. Until then it'll be ref.current.current

[ckifer]

removed the hack for ref.current.current in the 3.x branch