Javascript Rendered Apps (React, Angular)

[oliverbenns]

Same issue as here, but I'm using React. This will be a common issue for most Js rendered apps.

So requiring in the file automatically runs a function that goes through all the DOM elements and adds the various fallback styles, and giving you access to window.flexibility.

We need to be able to recalculate or re-run the self invoking function when we re-render areas of the site. .walk and .init doesn't really work as we won't always know the elements to render due to app's dynamic nature, and we should really be able to just define with -js-display: flex.

Ideally we would also be able to assign flexibility as a variable and use it when we need to, not whenever we require it and have it as a global variable.

E.g.

import flexibility from 'flexibility';

// Initial page render
render(foo, function() {
   flexibility.init(); // Not attached to window, and this is the first initialisation!
});

// On React component / Angular controller update
render(bar, function() {
   flexibility.update(); // Recalculate whole DOM
});

[JulioC]

Is there any workaround for forcing this re-init already?

[oliverbenns]

I attempted triggering a resize event in hope that it would re-calculate and apply styles, but to no avail.

I'm going to try using walk at some point, passing the universal selector into document.querySelector() when grabbing dom elements, but I imagine this will be very performance heavy.

[rennat-eb]

I got flexibility to work for our react components by adding:

...
    _updateFlexibility () {
        flexibility.walk(ReactDOM.findDOMNode(this));
    }

    componentDidMount () {
        this._updateFlexibility();
    }

    componentDidUpdate () {
        this._updateFlexibility();
    }
...

unfortunately our flex layout was too much for flexibility right away (several layers nested)

It sort-of worked, but failed to handle flex-direction: rows-reversed; and failed flex: 1 0 auto; on one child. We'll continue investigating because this would be a big win for us.

[reintroducing]

I apologize for resurrecting this but has there been any headway on this in the 2.x release? If not, what is the officially suggested way of using this in a React app?

[danawoodman]

Bump...

[jackdh]

Any Update?