7

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).

1
  • 1
    I think, for now, you need to listen to window.resize, and use $A.getCallback so you have a valid handler for modifying the component state.
    – sfdcfox
    Commented Dec 8, 2017 at 15:44

1 Answer 1

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');
        }
    })); 
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .