.eslintignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+es
+lib

.eslintrc

@@ -0,0 +1,35 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "eslint:recommended",
+    "plugin:import/recommended",
+    "plugin:react/recommended"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "rules": {
+    "valid-jsdoc": 2,
+    "react/prop-types": 0,
+    "react/jsx-uses-react": 1,
+    "react/jsx-no-undef": 2,
+    "import/no-unresolved": ["error", { "ignore": ["^react$"] }],
+    "comma-dangle": ["error", "always-multiline"],
+    "semi": ["error", "never"],
+    "no-trailing-spaces": ["error", { "skipBlankLines": true }],
+    "no-unused-vars": ["error", { "ignoreRestSiblings": true }]
+  },
+  "plugins": [
+    "import",
+    "react"
+  ]
+}

.gitignore

@@ -1,3 +1,7 @@
+es
+dist
 node_modules
 lib
 .DS_Store
+*.log
+.vscode

.npmignore

@@ -1,2 +1,9 @@
 node_modules
 src
+.storybook
+.editorconfig
+.eslintrc
+.eslintignore
+.prettierrc
+logo.png
+rollup.config.js

.prettierignore

@@ -0,0 +1 @@
+package.json

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "requirePragma": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false
+}

.storybook/components/Block.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
 const wrapperStyle = {
   paddingBottom: '20px',
-};
+}
 
 const titleStyle = {
   textTransform: 'uppercase',
@@ -12,17 +12,17 @@ const titleStyle = {
   color: '#999',
   paddingBottom: '5px',
   fontWeight: 'bold',
-};
+}
 
 const contentStyle = {
   border: '1px solid #DDD',
-};
+}
 
 const Block = ({ children, title }) => (
   <div style={wrapperStyle}>
     <div style={titleStyle}>{title}</div>
     <div style={contentStyle}>{children}</div>
   </div>
-);
+)
 
-export default Block;
+export default Block

.storybook/components/Code.js

@@ -1,14 +1,14 @@
-import React from 'react';
-import SyntaxHighlighter from 'react-syntax-highlighter';
-import { github as theme } from 'react-syntax-highlighter/dist/styles';
-import Block from './Block';
+import React from 'react'
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/prism'
+import { prism as theme } from 'react-syntax-highlighter/dist/styles/prism'
+import Block from './Block'
 
 const Code = ({ children }) => (
   <Block title="Code">
     <SyntaxHighlighter language="jsx" style={theme} customStyle={{ margin: 0 }}>
       {children}
     </SyntaxHighlighter>
   </Block>
-);
+)
 
-export default Code;
+export default Code

.storybook/components/MobileBreakpoint.js

@@ -1,17 +1,20 @@
-import React from 'react';
-import withSizes from '../../lib/withSizes';
+import React from 'react'
+import withSizes from '../../src/withSizes'
 
 const MobileBreakpoint = ({ isMobile, breakpoint, width }) => (
   <div>
-    <div>breakpoint: {breakpoint} | width: {width}</div>
+    <div>
+      breakpoint: {breakpoint} | width: {width}
+    </div>
     <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
-    <br /><br />
+    <br />
+    <br />
   </div>
-);
+)
 
 const mapSizesToProps = ({ width }, { breakpoint }) => ({
   isMobile: width < breakpoint,
   width,
-});
+})
 
-export default withSizes(mapSizesToProps)(MobileBreakpoint);
+export default withSizes(mapSizesToProps)(MobileBreakpoint)

.storybook/components/Result.js

@@ -1,10 +1,6 @@
-import React from 'react';
-import Block from './Block';
+import React from 'react'
+import Block from './Block'
 
-const Result = ({ children }) => (
-  <Block title="Result">
-    {children}
-  </Block>
-);
+const Result = ({ children }) => <Block title="Result">{children}</Block>
 
-export default Result;
+export default Result

.storybook/components/index.js

@@ -1,3 +1,3 @@
-export Block from './Block';
-export Code from './Code';
-export Result from './Result';
+export { default as Block } from './Block'
+export { default as Code } from './Code'
+export { default as Result } from './Result'

.storybook/config.js

@@ -1,4 +1,4 @@
-import { configure } from '@kadira/storybook';
+import { configure } from '@storybook/react';
 
 function loadStories() {
   require('./stories');

.storybook/stories/index.js

@@ -1,26 +1,56 @@
-import React from 'react';
-import { storiesOf, action, linkTo } from '@kadira/storybook';
-import { Code, Result } from '../components';
-import MobileBreakpoint from '../components/MobileBreakpoint';
-import withSizes from '../../lib/withSizes';
+import React from 'react'
+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',
   isMobile: withSizes.isMobile(sizes),
   isTablet: withSizes.isTablet(sizes),
   isDesktop: withSizes.isDesktop(sizes),
-});
+})
 
 const ExampleSizedComponent = withSizes(mapSizesToProps)(
   ({ isMobile, isTablet, isDesktop, backgroundColor }) => (
     <div style={{ backgroundColor, color: 'white', padding: '30px' }}>
-      <div><strong>Resize your window</strong></div>
+      <div>
+        <strong>Resize your window</strong>
+      </div>
       {isMobile && 'isMobile '}
       {isTablet && 'isTablet '}
       {isDesktop && 'isDesktop '}
     </div>
   )
-);
+)
+
+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', () => (
@@ -29,7 +59,7 @@ storiesOf('Sizes', module)
         <ExampleSizedComponent />
       </Result>
       <Code>
-{`import React from 'react';
+        {`import React from 'react';
 import withSizes from 'react-sizes';
 
 const mapSizesToProps = sizes => ({
@@ -52,12 +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 />)