useWindowWidth ignores body margin. about es-components HOT 4 CLOSED

It looks like useWindowWidth() is already using document.body.clientWidth

Update: I just realized this was suggesting instead of clientWidth.

from es-components.

Could you provide a jsfiddle or something demonstrating this? From what I can see, both document.body.clientWidth and document.documentElement.clientWidth return the same things, and do not include the margins.

The MDN Web docs say that these uses of clientWidth should be special cases that return the full viewport width minus the scrollbar only, and that's what I'm seeing with a simple test.

No margins:

Body margin of 500px, inner wrapper of 50px:

from es-components.

It sounds like using document.documentElement.clientWidth may be a safer option because it doesn't have the quirks-mode caveat.

from es-components.

Try to change width between 500 and 600 px
https://jsfiddle.net/manhust/j0tdrsyk/

from es-components.