react-breakpoints - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

es/index.js

@@ -5,3 +5,3 @@ import _ConnectedBreakpoints from './ConnectedBreakpoints';
 export { _Breakpoints as Breakpoints };
-import _breakpointsReducer from './reducer';
-export { _breakpointsReducer as breakpointsReducer };
+import _createBreakpointsReducer from './reducer';
+export { _createBreakpointsReducer as createBreakpointsReducer };

es/reducer.js

 import { CHANGE_BREAKPOINT } from './action';
 
-var breakpointsReducer = function breakpointsReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var action = arguments[1];
+var createBreakpointsReducer = function createBreakpointsReducer(guessedBreakpoint) {
+  var initialState = guessedBreakpoint ? guessedBreakpoint : 0;
+  return function breakpointsReducer() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+    var action = arguments[1];
 
-  switch (action.type) {
-    case CHANGE_BREAKPOINT:
-      return action.payload;
-    default:
-      return state;
-  }
+    switch (action.type) {
+      case CHANGE_BREAKPOINT:
+        return action.payload;
+      default:
+        return state;
+    }
+  };
 };
 
-export default breakpointsReducer;
+export default createBreakpointsReducer;

lib/index.js

 'use strict';
 
 exports.__esModule = true;
-exports.breakpointsReducer = exports.Breakpoints = exports.ConnectedBreakpoints = undefined;
+exports.createBreakpointsReducer = exports.Breakpoints = exports.ConnectedBreakpoints = undefined;
 
@@ -22,2 +22,2 @@ var _ConnectedBreakpoints2 = require('./ConnectedBreakpoints');
 exports.Breakpoints = _Breakpoints3.default;
-exports.breakpointsReducer = _reducer2.default;
+exports.createBreakpointsReducer = _reducer2.default;

lib/reducer.js

@@ -7,14 +7,17 @@ 'use strict';
 
-var breakpointsReducer = function breakpointsReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  var action = arguments[1];
+var createBreakpointsReducer = function createBreakpointsReducer(guessedBreakpoint) {
+  var initialState = guessedBreakpoint ? guessedBreakpoint : 0;
+  return function breakpointsReducer() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+    var action = arguments[1];
 
-  switch (action.type) {
-    case _action.CHANGE_BREAKPOINT:
-      return action.payload;
-    default:
-      return state;
-  }
+    switch (action.type) {
+      case _action.CHANGE_BREAKPOINT:
+        return action.payload;
+      default:
+        return state;
+    }
+  };
 };
 
-exports.default = breakpointsReducer;
+exports.default = createBreakpointsReducer;

package.json

 {
   "name": "react-breakpoints",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "A React component that sets breakpoints in the store, allowing you to load different components in different breakpoints",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

 # react-breakpoints [![npm](https://img.shields.io/npm/v/react-breakpoints.svg)](https://www.npmjs.com/package/react-breakpoints)
 
-This library contains a component that solves the problem that CSS 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 they look too different for you to be able to just style the component, you have to make one component for desktop and another for mobile. This is bad, because the JavaScript is still running for the desktop component on mobile, even if you are not seeing it.
+This library contains a component that 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 they look too different for you to be able to just style the component, you have to make one component for desktop and another for mobile. This is bad, because the JavaScript is still running for the desktop component on mobile, even if you are not seeing it.
 
@@ -9,7 +9,15 @@ This library solves that.
 
-It is still under development with `1.0.0` being the next milestone, it will include:
-- Accepting `guessedBreakpoint` prop from server.
-- Being able to handle a breakpoint array of varied length (now only supports 6) by rewriting the `calculateBreakpoint` method.
-- A fully featured `Breakpoints` component that works without Redux.
+This library is targeted to applications using both React and Redux, however, there's also a `Breakpoints` component included that uses just React.
 
+## Roadmap
+
+**VERSION 1.0.0**
+- [ ] Accepting `guessedBreakpoint` prop from server.
+- [x] ~~Being able to handle a breakpoint array of varied length (now only supports 6) by rewriting the `calculateBreakpoint` method.~~
+- [x] ~~A fully featured `Breakpoints` component that works without Redux.~~
+
+**VERSION 1.1.0**
+- [ ] Example project
+- [ ] Documentation for `Breakpoints` component for "React only" users
+
 ## Example
@@ -41,3 +49,3 @@ ```js
 
-import { ConnectedBreakpoints } from 'react-breakpoints'
+import { createBreakpointsReducer } from 'react-breakpoints'
 
@@ -69,4 +77,4 @@ const breakpoints = [
 export default combineReducers({
-  currentBreakpoint: breakpointsReducer
+  currentBreakpoint: createBreakpointsReducer()
 })
 ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23584

increased by2.72%

Lines of code

358

increased by1.7%

Number of lines in readme file

78

increased by11.43%

No dependency changes