Fix issue with preview width when window is resized #109
Conversation
| // If the window is resized, trigger a fresh render of the grid. | ||
| // Helps ensure PatternPreview iFrames are the right size. | ||
| useWindowResize(); |
There was a problem hiding this comment.
useWindowResize is called in PatternGrid so only the grid is re-rendered (instead of calling higher in the tree and also re-rendering categories, for example).
There was a problem hiding this comment.
Really good idea to keep re-rendering to this low scope
|
|
||
| /** Rerender the calling component when the window is resized. */ | ||
| export default function useWindowResize() { | ||
| const [ , setWindowSize ] = useState( [ 0, 0 ] ); |
There was a problem hiding this comment.
We could also add a windowSize const and return it if we wanted to use that data elsewhere, but I see no practical usage for it right now.
There was a problem hiding this comment.
That's a nice trick to force a re-render.
The fact that there's a no windowSize makes it clear that we're not using it, we're just using setState() to force a re-render.
| useEffect( () => { | ||
| if ( previewContainer?.current ) { | ||
| setPreviewContainerSize( | ||
| previewContainer?.current?.getBoundingClientRect() | ||
| ); | ||
| } | ||
| }, [ previewContainer ] ); | ||
| const previewContainerSize: BoundingClientRect | undefined = | ||
| previewContainer?.current?.getBoundingClientRect(); |
There was a problem hiding this comment.
Derived state needs to be used for previewContainerSize for this idea to work.
With it, a fresh getBoundingClientRect() is called each time the component is rendered.
Otherwise, useEffect is not called again after initial render since the previewContainer dependency does not update, making it harder to call setPreviewContainerSize with the new bounding client rect.
There was a problem hiding this comment.
Good idea to use derived state
| useEffect( () => { | ||
| if ( previewContainer?.current ) { | ||
| setPreviewContainerSize( | ||
| previewContainer?.current?.getBoundingClientRect() | ||
| ); | ||
| } | ||
| }, [ previewContainer ] ); | ||
| const previewContainerSize: BoundingClientRect | undefined = | ||
| previewContainer?.current?.getBoundingClientRect(); |
There was a problem hiding this comment.
Good idea to use derived state
| // If the window is resized, trigger a fresh render of the grid. | ||
| // Helps ensure PatternPreview iFrames are the right size. | ||
| useWindowResize(); |
There was a problem hiding this comment.
Really good idea to keep re-rendering to this low scope
| export default function useWindowResize() { | ||
| const [ , setWindowSize ] = useState( [ 0, 0 ] ); | ||
|
|
||
| useLayoutEffect( () => { |
There was a problem hiding this comment.
Nice use of useLayoutEffect() instead of useEffect()
There was a problem hiding this comment.
Looks great! I added the PR link to our beta list on #57 and checked it off!
|
Thanks for the checking this out @kienstra and @dreamwhisper! |
Currently, in the patterns view, the previews look a bit odd when the browser window is resized:
The previews width effectively remain static, but they should be updating as the window size changes.
This PR triggers a fresh render of the
PatternGridwhen the window is resized, causing the previews to be rendered at the expected width:How to test