How to run code when the browser window is resized in a Lightning Component?

Question

I am running some code on the render event that decides whether or not some buttons related to scrolling are displayed depending on some element properties:

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

If a user resizes their browser window, I'd like to run the same code. But I do not see any component-level mechanism (such as an event) related to such resizing.

Is there an established pattern for responding to browser window resizes in Lightning Components?

(There is a ui:resizeObserver in the open source but that hasn't made it into the set of supported components if this Component Reference list is complete).

Answer 1

Instead of using

<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>

you can use

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

and you can check window.addEventListner to detect the resizing. Paste this code in your doInit JS controller method and check if it works.

doInit : function(component, event, helper) {
    window.addEventListener('resize', $A.getCallback(function(){
        if(component.isValid()) {
            console.log('Resizing');
        }
    })); 
}