Detect when an element changes size

[Brittany-Reid]

Cool package, hoping to do some fun stuff with it.

I have the following component that measures width and prints it.

const main = () => {

    const [width, setWidth] = React.useState(0);

    const boxRef = React.useRef();

    React.useEffect(()=>{
        var dimensions = ink.measureElement(boxRef.current);
        setWidth(dimensions.width);
    })

    ink.useInput(()=>{

    });

    return e(ink.Box, {borderStyle:"double", width:"100%", ref:boxRef, height:4},
        e(ink.Text, {}, width)
    );
}

When I shrink the terminal width, the width value does not update. Similarly, if this component has a sibling that can change the layout and result in changing this component's width, the elements will render fine but the width value will not update. How can I tell when some change happens to the size of my element?

I have a onTerminalResize hook that solves half of this problem, but for non-terminal resize layout changes this is still an issue.

The yoga docs aren't too great so I took a look at the issues. There's a setDirtiedFunc: https://github.com/facebook/yoga/pull/842 I tried this on boxRef.current.yogaNode and the function didn't exist. Not sure if dirtied state is even what I want.

And YGNodeGetHasNewLayout to detect if a node layout has been changed: https://github.com/facebook/yoga/issues/681 But I couldn't find the function, so it looks like it was never added?

[dustinlacewell]

Interested in this as well.

[nclsndr]

Did you tried using a callback ref approach? https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node EDIT: nope, it gets down to the same issue.