How do I get the pixel value width of a custom lightning component?

Question

I am trying to get the pixel value width of a custom lightning component. So far the closest I've gotten to a width is descriptive values like SMALL, MEDIUM, and LARGE via lightning:flexipageRegionInfo

Any retrievals from document or the DOM fail because of SecureDocument API.

Answer 1

You can get your own width by putting an empty div somewhere in your component:

<div aura:id="measurement" />

---

var width = component.find("measurement").getBoundingClientRect().width;

---

Note that this won't work in "init" because rendering hasn't occurred yet, but you can do so immediately afterwards using setTimeout:

setTimeout(
    $A.getCallback(
        function() {
            var width = component.find("space").getElement().getBoundingClientRect().width;
        }
    )
);

The SecureComponent API has limits, but as long as you stay with normal HTML or your own custom components, you can get this measurement.