react-sizes - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

.storybook/stories/index.js

 import React from 'react';
 import { storiesOf, action, linkTo } from '@kadira/storybook';
 import { Code, Result } from '../components';
-import Sizes from '../../lib/Sizes';
+import MobileBreakpoint from '../components/MobileBreakpoint';
+import withSizes from '../../lib/withSizes';
 
 const mapSizesToProps = sizes => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',
-  isMobile: Sizes.isMobile(sizes),
-  isTablet: Sizes.isTablet(sizes),
-  isDesktop: Sizes.isDesktop(sizes),
+  isMobile: withSizes.isMobile(sizes),
+  isTablet: withSizes.isTablet(sizes),
+  isDesktop: withSizes.isDesktop(sizes),
 });
 
-const ExampleSizedComponent = Sizes(mapSizesToProps)(
+const ExampleSizedComponent = withSizes(mapSizesToProps)(
   ({ isMobile, isTablet, isDesktop, backgroundColor }) => (
@@ -32,12 +33,12 @@ <div style={{ backgroundColor, color: 'white', padding: '30px' }}>
 {`import React from 'react';
-import Sizes from 'react-sizes';
+import withSizes from 'react-sizes';
 
 const mapSizesToProps = sizes => ({
   backgroundColor: sizes.width > 800 ? 'green' : 'blue',
-  isMobile: Sizes.isMobile(sizes),
-  isTablet: Sizes.isTablet(sizes),
-  isDesktop: Sizes.isDesktop(sizes),
+  isMobile: withSizes.isMobile(sizes),
+  isTablet: withSizes.isTablet(sizes),
+  isDesktop: withSizes.isDesktop(sizes),
 });
 
-const ExampleSizedComponent = Sizes(mapSizesToProps)(
+const ExampleSizedComponent = withSizes(mapSizesToProps)(
   ({ isMobile, isTablet, isDesktop, backgroundColor }) => (
@@ -54,2 +55,11 @@ <div><strong>Resize your window</strong></div>
     </div>
-  ));
+  ))
+
+  .add('mobileBreakpoint', () => (
+    <div>
+      <MobileBreakpoint breakpoint={300} />
+      <MobileBreakpoint breakpoint={500} />
+      <MobileBreakpoint breakpoint={700} />
+    </div>
+  ))
+;

index.js

@@ -1,1 +0,1 @@
-module.exports = require('./lib/Sizes');
+module.exports = require('./lib/withSizes');

package.json

 {
   "name": "react-sizes",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "Hoc to easily map window sizes to props.",
@@ -12,3 +12,3 @@ "main": "index.js",
     "build-storybook": "build-storybook",
-    "pub": "yarn build && np"
+    "pub": "npm run build && np"
   },
@@ -41,2 +41,3 @@ "repository": {
     "react": "^15.5.3",
+    "react-display-name": "^0.2.0",
     "uuid": "^3.0.1"
@@ -51,3 +52,3 @@ },
     "babel-preset-stage-2": "^6.24.1",
-    "chokidar": "^1.6.1",
+    "chokidar-cli": "^1.2.0",
     "del-cli": "^0.2.1",
@@ -54,0 +55,0 @@ "np": "^2.13.1",

README.md

 ![react-sizes](./logo.png)
 
-[![npm](https://img.shields.io/npm/v/react-sizes.svg?style=flat-square)](https://img.shields.io/npm/v/react-sizes.svg)
-[![npm](https://img.shields.io/npm/dt/react-sizes.svg?style=flat-square)](https://img.shields.io/npm/v/react-sizes.svg)
+[![npm](https://img.shields.io/npm/v/react-sizes.svg?style=flat-square)](https://www.npmjs.com/package/react-sizes)
+[![npm](https://img.shields.io/npm/dt/react-sizes.svg?style=flat-square)](https://www.npmjs.com/package/react-sizes)
 [![GitHub issues](https://img.shields.io/github/issues/renatorib/react-sizes.svg?style=flat-square)](https://github.com/renatorib/react-sizes/issues)
@@ -29,4 +29,4 @@ [![GitHub stars](https://img.shields.io/github/stars/renatorib/react-sizes.svg?style=flat-square)](https://github.com/renatorib/react-sizes/stargazers)
 ```jsx
-import React from 'react';
-import Sizes from 'react-sizes';
+import React, { Component } from 'react';
+import withSizes from 'react-sizes';
 
@@ -45,4 +45,5 @@ class MyComponent extends Component {
 
-export Sizes(mapSizesToProps)(MyComponent);
+export default withSizes(mapSizesToProps)(MyComponent);
 ```
+You can play with this example [here](https://codesandbox.io/s/Rg0DDOWnE).
 
@@ -52,5 +53,5 @@ #### As decorator.
 import React from 'react';
-import Sizes from 'react-sizes';
+import withSizes from 'react-sizes';
 
-@Sizes(({ width }) => ({ isMobile: width < 480 }))
+@withSizes(({ width }) => ({ isMobile: width < 480 }))
 class MyComponent extends Component {
@@ -67,6 +68,29 @@ render() {
 
+#### Interoperate with other libraries.
+```jsx
+import React from 'react';
+import withSizes from 'react-sizes';
+import { withState, compose } from 'recompose';
+
+const enhancer = compose(
+  withState('counter', 'setCounter', 0),
+  withSizes(({ width }) => ({ isMobile: width < 480 })),
+);
+
+const MyComponent = enhancer(({ isMobile, counter, setCounter }) => (
+  <div>
+    <div>
+      Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button>
+    </div>
+    <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
+  </div>
+));
+
+export default MyComponent;
+```
+
 #### With functional component.
 ```jsx
 import React from 'react';
-import Sizes from 'react-sizes';
+import withSizes from 'react-sizes';
 
@@ -81,27 +105,27 @@ const MyComponent = ({ isMobile }) => (
 
-export Sizes(mapSizesToProps)(MyComponent);
+export default withSizes(mapSizesToProps)(MyComponent);
 ```
 
-#### Interoperate with other libraries.
+#### Mess with props.
+(Added in 0.1.0)
 ```jsx
 import React from 'react';
-import Sizes from 'react-sizes';
-import { withState, compose } from 'recompose';
+import withSizes from 'react-sizes';
 
-const enhancer = compose(
-  withState('counter', 'setCounter', 0),
-  Sizes(({ width }) => ({ isMobile: width < 480 })),
+const MyComponent = ({ isMobile }) => (
+  <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
 );
 
-const MyComponent = enhancer(({ isMobile, counter, setCounter }) => (
-  <div>
-    <div>
-      Count: {counter} <button onClick={() => setCounter(n => n + 1)}>Increment</button>
-    </div>
-    <div>{isMobile ? 'Is Mobile' : 'Is Not Mobile'}</div>
-  </div>
-));
+const mapSizesToProps = ({ width }, { mobileBreakpoint }) => ({
+  isMobile: width < mobileBreakpoint,
+});
 
-export default MyComponent;
+export default withSizes(mapSizesToProps)(MyComponent);
 ```
+then:
+```jsx
+<MyComponent mobileBreakpoint={480} />
+<MyComponent mobileBreakpoint={400} />
+<MyComponent mobileBreakpoint={600} />
+```
 
@@ -115,3 +139,3 @@ #### With presets selectors.
 + const mapSizesToProps = sizes => ({
-+  isMobile: Sizes.isMobile(sizes),
++  isMobile: withSizes.isMobile(sizes),
 + });
@@ -122,16 +146,16 @@ ```
 
-You can check all **our** presets selectors at our main code `src/Sizes.js`.
+You can check all **our** presets selectors at our main code `src/withSizes.js`.
 ```js
-Sizes.isMobile = ({ width }) => width < 480;
-Sizes.isTablet = ({ width }) => width >= 480 && width < 1024;
-Sizes.isDesktop = ({ width }) => width >= 1024;
+withSizes.isMobile = ({ width }) => width < 480;
+withSizes.isTablet = ({ width }) => width >= 480 && width < 1024;
+withSizes.isDesktop = ({ width }) => width >= 1024;
 
-Sizes.isGtMobile = (sizes) => !Sizes.isMobile(sizes);
-Sizes.isGtTablet = (sizes) => Sizes.isDesktop(sizes);
+withSizes.isGtMobile = (sizes) => !withSizes.isMobile(sizes);
+withSizes.isGtTablet = (sizes) => withSizes.isDesktop(sizes);
 
-Sizes.isStTablet = (sizes) => Sizes.isMobile(sizes);
-Sizes.isStDesktop = (sizes) => !Sizes.isStDesktop(sizes);
+withSizes.isStTablet = (sizes) => withSizes.isMobile(sizes);
+withSizes.isStDesktop = (sizes) => !withSizes.isStDesktop(sizes);
 
-Sizes.isTabletAndGreater = (sizes) => !Sizes.isMobile(sizes);
-Sizes.isTabletAndSmaller = (sizes) => !Sizes.isStDesktop(sizes);
+withSizes.isTabletAndGreater = (sizes) => !withSizes.isMobile(sizes);
+withSizes.isTabletAndSmaller = (sizes) => !withSizes.isStDesktop(sizes);
 ```
@@ -143,3 +167,3 @@
 export const isntDesktop = ({ width }) => width < 1024;
-export const backgroundColor = ({ width }) => width < 480 ? 'red' : 'green;
+export const backgroundColor = ({ width }) => width < 480 ? 'red' : 'green';
 
@@ -146,0 +170,0 @@ // your component

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

211994

increased by1.59%

Lines of code

254

increased by6.28%

Number of lines in readme file

222

increased by12.12%

Worsened metrics

Dependency count

5

increased by25%

Number of package files

18

decreased by-5.26%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact-display-name@^0.2.0

• + Addedreact-display-name@0.2.5(transitive)