Merge pull request #7 from ehellman/release/3.0.0

3.0.0

Author: ehellman

.gitignore

@@ -2,4 +2,5 @@
 .DS_Store
 lib
 es
-.vscode
+.vscode
+example/node_modules

.npmignore

@@ -2,4 +2,5 @@
 modules
 node_modules
 README.md
-CHANGELOG.md
+CHANGELOG.md
+example

.prettierignore

@@ -0,0 +1,5 @@
+package.json
+package-lock.json
+.babelrc
+.npmignore
+.gitignore

.prettierrc

@@ -0,0 +1,12 @@
+{
+  "useTabs": false,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "jsxBracketSameLine": false,
+  "parser": "babylon",
+  "semi": false,
+  "arrowParens": "avoid",
+  "bracketSpacing": true
+}

README.md

@@ -4,22 +4,18 @@
 
 This library solves the problem that CSS media queries alone could not solve. Sometimes you want to create an application that looks a certain way on desktop and a certain way on mobile. Sometimes the components look too different for you to be able to just change the CSS, you have to make one component for desktop and another for mobile. This is bad, because the JavaScript for the hidden component is still running in the background even though you are not seeing it.
 
-This library solves that.
-
 `react-breakpoints` allows you to use the viewport width to load different components, opening up for building more complex responsive applications without suffering the performance problems of hidden desktop components on your mobile site and vice versa.
 
-This library is not dependent on Redux, see documentation for instructions on how to use.
+Version 2.0.0 was rewrite with the new context API that came in React `16.3.0`. A polyfill for older React versions is included in the library, so it is backwards compatible with `15.x.x` and `16.x.x`. However, version 4.0.0 will no longer support `15.x.x`.
 
-Version 2.0.0 is a rewrite with the new context API that came in React `16.3.0`. A polyfill for older React versions is included in the library, so it is backwards compatible with `15.x.x` and `16.x.x`.
+Version 3.0.0 introduced `<Media>` with `renderProps` an alternative to the `withBreakpoints` HOC.
 
 ## Roadmap
 
-**VERSION 3.0.0**
-- [ ] Test that `guessedBreakpoint` prop from server side rendering works, make changes if needed.
-- [ ] Example project
-- [ ] `debounceOptions` object passdown if needed.
+* [ ] `debounceOptions` object passdown if needed.
 
 ## Installation
+
 `npm install --save react-breakpoints`
 
 ## Usage
@@ -44,65 +40,92 @@ const breakpoints = {
 ReactDOM.render(
   <ReactBreakpoints breakpoints={breakpoints}>
     <App />
-  </ReactBreakpoints>, 
-  document.getElementById('root')
+  </ReactBreakpoints>,
+  document.getElementById('root'),
 )
 ```
 
 ## Inside your components
 
-When you want access to the current screen width inside a component you import the `withBreakpoints` function, wrapping your component when you export it. This will give you access to `props.screenWidth` which updates whenever you resize your window or your device orientation changes and `props.breakpoints` which is the original object which you supplied to the `ReactBreakpoints` component.
+When you want access to the current screen width inside a component you import the `withBreakpoints` function, wrapping your component when you export it. This will give you access to `props.currentBreakpoint` which updates whenever you resize your window to the point where it hits a new breakpoint, or your device orientation changes. It also adds `props.breakpoints` which is the original object which you supplied to the `ReactBreakpoints` component, so you can make comparisons with `props.currentBreakpoint`.
+
+### Render Props
 
 ```js
-import { withBreakpoints } from 'react-breakpoints'
+import { Media } from 'react-breakpoints'
 
 class Navigation extends React.Component {
   render() {
+    const { breakpoints, currentBreakpoint } = this.props
+    console.log(breakpoints) // { small: 320, medium: 768, ... }
+    console.log(currentBreakpoint) // 'small'
     return (
-      <div>
-        {
-          this.props.screenWidth > this.props.breakpoints.desktop
-            ? <DesktopNavigation />
-            : <TouchNavigation />
+      <Media>
+        {({ breakpoints, currentBreakpoint }) =>
+          breakpoints[currentBreakpoint] > breakpoints.desktop ? (
+            <DesktopNavigation />
+          ) : (
+            <TouchNavigation />
+          )
         }
-      </div>
+      </Media>
     )
   }
 }
 
-
-export default withBreakpoints(Navigation)
+export default Navigation
 ```
 
-It works the exact same way in stateless components, here is a more extensive example:
+### HOC
 
 ```js
 import { withBreakpoints } from 'react-breakpoints'
 
-const MyComponent = ({ screenWidth, breakpoints }) => {
-  let renderList
-  if (screenWidth < breakpoints.tablet) {
-    renderList = <MobileList />
-  }
-  else if (screenWidth >= breakpoints.tablet && screenWidth < breakpoints.desktop) {
-    renderList = <TabletList />
-  }
-  else if (screenWidth >= breakpoints.desktop) {
-    renderList = <DesktopList />
+class Navigation extends React.Component {
+  render() {
+    const { breakpoints, currentBreakpoint } = this.props
+    return (
+      <div>
+        {breakpoints[currentBreakpoint] > breakpoints.desktop ? (
+          <DesktopNavigation />
+        ) : (
+          <TouchNavigation />
+        )}
+      </div>
+    )
   }
-  return (
-    <div>
-      <label>Select from the list below:</label>
-      {renderList}
-    </div>
-  )
 }
-  
-export default withBreakpoints(MyComponent)
+
+export default withBreakpoints(Navigation)
+```
+
+Here is a more extensive example with renderProps:
+
+```js
+import { Media } from 'react-breakpoints'
+
+const MyComponent = props => (
+  <div>
+    <h3>Select from the list below:</h3>
+    <Media>
+      {({ breakpoints, currentBreakpoint }) => {
+        switch (currentBreakpoint) {
+          case breakpoints.mobile:
+            return <MobileList />
+          case breakpoints.tablet:
+            return <TabletList />
+          case breakpoints.desktop:
+            return <DesktopList />
+        }
+      }}
+    </Media>
+  </div>
+)
+
+export default MyComponent
 ```
 
 ## Server side rendering
-**WARNING:** This feature is experimental.
 
 ```js
 // server.js
@@ -119,35 +142,22 @@ const breakpoints = {
   desktopWide: 1920,
 }
 
-const guessedBreakpoint = breakpoints.mobile // create your own logic to generate this number
+const guessedBreakpoint = breakpoints.mobile // create your own logic to generate this
 
 const markup = renderToString(
-  <ReactBreakpoints 
-    guessedBreakpoint={guessedBreakpoint} 
+  <ReactBreakpoints
+    guessedBreakpoint={guessedBreakpoint}
     breakpoints={breakpoints}
   >
     <App/>
   <ReactBreakpoints />
 )
 ```
 
-## With ES7 decorators
-
-```js
-import { withBreakpoints } from 'react-breakpoints'
-
-@withBreakpoints
-class Navigation extends React.Component {
-  render() {
-    return this.props.screenWidth > this.props.breakpoints.desktop
-      ? <DesktopNavigation />
-      : <TouchNavigation />
-  }
-}
-```
 ## Options
 
 ### `debounceResize: bool` option
+
 By default, this library does NOT debounce the `resize` listener. However, by passing the `debounceResize` prop to the `ReactBreakpoints` component it will be enabled with a default delay.
 
 ```js
@@ -163,6 +173,7 @@ ReactDOM.render(
 ```
 
 ### `debounceDelay: number[ms]` option
+
 Set a custom delay in milliseconds for how the length of the debounce wait.
 
 ```js
@@ -179,10 +190,10 @@ ReactDOM.render(
 ```
 
 ### `defaultBreakpoint: number` option
-In case you always want to default to a certain breakpoint, say you're building a mobile-only application - you can pass the mobile breakpoint here.
 
-```js
+In case you always want to default to a certain breakpoint.
 
+```js
 const breakpoints = {
   mobile: 320,
   tablet: 768,
@@ -195,7 +206,7 @@ ReactDOM.render(
     defaultBreakpoint={breakpoints.mobile}
   >
     <App />
-  </ReactBreakpoints>  
-  , document.getElementById('root')
+  </ReactBreakpoints>,
+  document.getElementById('root'),
 )
-```
+```

example/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*