feat: add useDocumentElement option

.storybook/stories/index.js

@@ -5,7 +5,7 @@ import MobileBreakpoint from '../components/MobileBreakpoint'
 import withSizes from '../../src/withSizes'
 import SizesProvider from '../../src/SizesProvider'
 
-const mapSizesToProps = sizes => ({
+const mapSizesToProps = (sizes) => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',
   isMobile: withSizes.isMobile(sizes),
   isTablet: withSizes.isTablet(sizes),
@@ -25,6 +25,73 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
   )
 )
 
+class DocumentElementExample extends React.Component {
+  state = {
+    windowWidth: window.innerWidth,
+    documentWidth: document.documentElement.clientWidth,
+  }
+
+  constructor(...args) {
+    super(...args)
+    this.resetState = this.resetState.bind(this)
+  }
+
+  resetState() {
+    this.setState({
+      windowWidth: window.innerWidth,
+      documentWidth: document.documentElement.clientWidth,
+    })
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.resetState)
+    this.resetState()
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resetState)
+  }
+
+  render() {
+    return (
+      <>
+        <style>
+          {`html {
+            overflow-y: scroll;
+          }`}
+        </style>
+        <SizesProvider config={{ useDocumentElement: true }}>
+          <Result>
+            <ExampleSizedComponent />
+            <table>
+              <thead>
+                <tr>
+                  <th>
+                    <pre>window.innerWidth</pre>
+                  </th>
+                  <th>
+                    <pre>document.documentElement.clientWidth</pre>
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>
+                    <pre>{this.state.windowWidth}</pre>
+                  </td>
+                  <td>
+                    <pre>{this.state.documentWidth}</pre>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </Result>
+        </SizesProvider>
+      </>
+    )
+  }
+}
+
 class ForceFallbackExample extends React.Component {
   state = {
     forceFallback: true,
@@ -82,6 +149,7 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
       </Code>
     </div>
   ))
+  .add('useDocumentElement', () => <DocumentElementExample />)
   .add('mobileBreakpoint', () => (
     <div>
       <MobileBreakpoint breakpoint={300} />

README.md

@@ -80,7 +80,7 @@ const MyComponent = enhancer(({ isMobile, counter, setCounter }) => (
   <div>
     <div>
       Count: {counter}{' '}
-      <button onClick={() => setCounter(n => n + 1)}>Increment</button>
+      <button onClick={() => setCounter((n) => n + 1)}>Increment</button>
     </div>
     <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
   </div>
@@ -154,14 +154,14 @@ withSizes.isMobile = ({ width }) => width < 480
 withSizes.isTablet = ({ width }) => width >= 480 && width < 1024
 withSizes.isDesktop = ({ width }) => width >= 1024
 
-withSizes.isGtMobile = sizes => !withSizes.isMobile(sizes)
-withSizes.isGtTablet = sizes => withSizes.isDesktop(sizes)
+withSizes.isGtMobile = (sizes) => !withSizes.isMobile(sizes)
+withSizes.isGtTablet = (sizes) => withSizes.isDesktop(sizes)
 
-withSizes.isStTablet = sizes => withSizes.isMobile(sizes)
-withSizes.isStDesktop = sizes => !withSizes.isStDesktop(sizes)
+withSizes.isStTablet = (sizes) => withSizes.isMobile(sizes)
+withSizes.isStDesktop = (sizes) => !withSizes.isStDesktop(sizes)
 
-withSizes.isTabletAndGreater = sizes => !withSizes.isMobile(sizes)
-withSizes.isTabletAndSmaller = sizes => !withSizes.isStDesktop(sizes)
+withSizes.isTabletAndGreater = (sizes) => !withSizes.isMobile(sizes)
+withSizes.isTabletAndSmaller = (sizes) => !withSizes.isStDesktop(sizes)
 ```
 
 If it don't fit to your needs, you can create your own selectors.
@@ -174,30 +174,40 @@ export const backgroundColor = ({ width }) => (width < 480 ? 'red' : 'green')
 // your component
 import { isntDesktop, backgroundColor } from 'utils/sizes/selectors'
 
-const mapSizesToProps = sizes => ({
+const mapSizesToProps = (sizes) => ({
   canDisplayMobileFeature: isntDesktop(sizes),
   backgroundColor: backgroundColor(sizes),
 })
 ```
 
 > `sizes` argument is an object with `width` and `height` properties and represents DOM window width and height.
 
+## Window Width Resource
+
+By default react-sizes will use `window.innerWidth` to determine the width of the current window. This will also take in to account a body scroll bar. If you'd rather ignore the body's scrollbar and base the size on the document's client width, pass the `useDocumentElement` option:
+
+```jsx
+<SizeProvider config={{ useDocumentElement: true }}>
+  <App />
+</SizeProvider>
+```
+
 ## Guide
 
 #### mapSizesToProps(sizes)
 
 `sizes` argument is an object with `width` and `height` of DOM window.
 
 ```js
-const mapSizesToProps = sizes => {
+const mapSizesToProps = (sizes) => {
   console.log(sizes) // { width: 1200, height: 720 } (example)
 }
 ```
 
 In pratice, it is a callback that return props that will injected into your Component.
 
 ```js
-const mapSizesToProps = function(sizes) {
+const mapSizesToProps = function (sizes) {
   const props = {
     backgroundColor: sizes.width < 700 ? 'red' : 'green',
   }
@@ -238,7 +248,7 @@ import Express from 'express'
 import { SizesProvider } from 'react-sizes'
 // All other imports
 
-const getSizesFallback = userAgent => {
+const getSizesFallback = (userAgent) => {
   const md = new MobileDetect(userAgent)
 
   if (!!md.mobile()) {

src/SizesContext.js

@@ -1,6 +1,7 @@
 import React from 'react'
 
 const SizesContext = React.createContext({
+  useDocumentElement: false,
   fallbackWidth: null,
   fallbackHeight: null,
   forceFallback: false,

src/utils/getWindowSizes.js

@@ -1,9 +1,24 @@
-const getWindowSizes = ({ fallbackWidth = null, fallbackHeight = null, forceFallback = false }) => {
+const getWindowSizes = ({
+  useDocumentElement = false,
+  fallbackWidth = null,
+  fallbackHeight = null,
+  forceFallback = false,
+}) => {
   const canUseDOM = typeof window !== 'undefined'
 
   return {
-    width: canUseDOM && !forceFallback ? window.innerWidth : fallbackWidth,
-    height: canUseDOM && !forceFallback ? window.innerHeight : fallbackHeight,
+    width:
+      canUseDOM && !forceFallback
+        ? useDocumentElement
+          ? document.documentElement.clientWidth
+          : window.innerWidth
+        : fallbackWidth,
+    height:
+      canUseDOM && !forceFallback
+        ? useDocumentElement
+          ? document.documentElement.clientHeight
+          : window.innerHeight
+        : fallbackHeight,
     canUseDOM,
   }
 }

src/withSizes.js

@@ -9,15 +9,25 @@ import getWindowSizes from './utils/getWindowSizes'
 import SizesContext from './SizesContext'
 import * as presets from './presets'
 
-const getWindowSizesWithFallback = props => {
-  const { fallbackHeight, fallbackWidth, forceFallback } = props
-  return getWindowSizes({ fallbackHeight, fallbackWidth, forceFallback })
+const getWindowSizesWithFallback = (props) => {
+  const {
+    useDocumentElement,
+    fallbackHeight,
+    fallbackWidth,
+    forceFallback,
+  } = props
+  return getWindowSizes({
+    useDocumentElement,
+    fallbackHeight,
+    fallbackWidth,
+    forceFallback,
+  })
 }
 
-const withSizes = (...mappedSizesToProps) => WrappedComponent => {
+const withSizes = (...mappedSizesToProps) => (WrappedComponent) => {
   const parseMappedSizesToProps = (dimensions, props) =>
     mappedSizesToProps
-      .map(check => check(dimensions, props))
+      .map((check) => check(dimensions, props))
       .reduce((acc, props) => ({ ...acc, ...props }), {})
 
   class ComponentWithSizes extends PureComponent {
@@ -85,9 +95,9 @@ const withSizes = (...mappedSizesToProps) => WrappedComponent => {
     }
   }
 
-  const WithSizes = props => (
+  const WithSizes = (props) => (
     <SizesContext.Consumer>
-      {config => <ComponentWithSizes {...config} {...props} />}
+      {(config) => <ComponentWithSizes {...config} {...props} />}
     </SizesContext.Consumer>
   )