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
    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 Dec 8 '17 at 15:44

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()) {

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.