Example of React component in Typescript using forwarding refs

forwardRef.tsx

import * as React from "react";

const Forward = React.forwardRef((props, ref: React.Ref<HTMLDivElement>) => (
    <div ref={ref} style={{ width: "100%", height: "30px", backgroundColor: "green" }} />
));

function ForwardRef() {
    const divRef = React.useRef<HTMLDivElement>(null);

    React.useEffect(() => {
        if (divRef.current) {
            console.log(`forwardRefRef div width: ${divRef.current.clientWidth}`);
        }
    });

    return <Forward ref={divRef} />;
}

export default ForwardRef;

This complains when I then try to access the ref within the Forward component body. Forward is passed a RefObject but any reference to ref.current makes TS complain :(

@cmmartin did you figure this out?

It's complicated but here's how you do it: https://stackoverflow.com/questions/62238716/using-ref-current-in-react-forwardref