Add force fallback option (#36)

* Add force fallback flag

* Fix highlight syntax theme

Author: danielr18

.storybook/stories/index.js

@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { Code, Result } from '../components'
 import MobileBreakpoint from '../components/MobileBreakpoint'
 import withSizes from '../../src/withSizes'
+import SizesProvider from '../../src/SizesProvider'
 
 const mapSizesToProps = sizes => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',
@@ -24,6 +25,33 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
   )
 )
 
+class ForceFallbackExample extends React.Component {
+  state = {
+    forceFallback: true,
+  }
+
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({ forceFallback: false })
+    }, 5000)
+  }
+
+  render() {
+    const { forceFallback } = this.state
+
+    return (
+      <SizesProvider
+        config={{ fallbackHeight: 640, fallbackWidth: 280, forceFallback }}
+      >
+        <Result>
+          {forceFallback && <p>Forcing fallback to mobile</p>}
+          <ExampleSizedComponent />
+        </Result>
+      </SizesProvider>
+    )
+  }
+}
+
 storiesOf('Sizes', module)
   .add('default behavior', () => (
     <div>
@@ -54,11 +82,11 @@ const ExampleSizedComponent = withSizes(mapSizesToProps)(
       </Code>
     </div>
   ))
-
   .add('mobileBreakpoint', () => (
     <div>
       <MobileBreakpoint breakpoint={300} />
       <MobileBreakpoint breakpoint={500} />
       <MobileBreakpoint breakpoint={700} />
     </div>
   ))
+  .add('force fallback', () => <ForceFallbackExample />)

src/utils/getWindowSizes.js

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

src/withSizes.js

@@ -10,8 +10,8 @@ import SizesContext from './SizesContext'
 import * as presets from './presets'
 
 const getWindowSizesWithFallback = props => {
-  const { fallbackHeight, fallbackWidth } = props
-  return getWindowSizes({ fallbackHeight, fallbackWidth })
+  const { fallbackHeight, fallbackWidth, forceFallback } = props
+  return getWindowSizes({ fallbackHeight, fallbackWidth, forceFallback })
 }
 
 const withSizes = (...mappedSizesToProps) => WrappedComponent => {
@@ -76,6 +76,7 @@ const withSizes = (...mappedSizesToProps) => WrappedComponent => {
       const {
         fallbackHeight,
         fallbackWidth,
+        forceFallback,
         ...otherProps
       } = this.props