search

ctrlplusb / react-sizeme

Make your React Components aware of their width and height!
MIT License
1.95k stars 94 forks source link

Placeholder size not updating until a state change #226

Open elizabethhyer opened 2 years ago

elizabethhyer commented 2 years ago

I have an app that uses sizeme and CSS grid. When the app first renders (and on a hard or soft reload) the component that uses sizeme is squished, widthwise. It seems like the placeholder is taking its size estimate from grid.

The problem is that the size doesn't ever update until there's been a state change. Right now, as a work around, I'm updating state whenever the mouse enters the component, and this allows sizeme to start working (updating size when the screen is resized, using the entire width of the component instead of a single grid area).

I'm sorry I don't have a great way to illustrate this in a sandbox, but has anyone seen a component using sizeme get 'locked in' to a size until a state change?

adding noPlaceholder doesn't change this behavior.

bradjones1 commented 1 year ago

I just ran into this as well, but without CSS grid.

I have a hybrid RN/RN-Web application where I control the maximum width of the root node (so as not to use the entire width of a very wide UA viewport.) The size passed to the child node render did not update.

As a workaround, I am using useWindowDimensions() and passing the width from it to the SizeMe element as an unused prop, but this is enough for React to trigger a re-render of the SizeMe element and its children because it sees it as a prop change.