feat: add mobile breakpoint to contex

Author: joaopedrodcf

README.md

@@ -41,7 +41,8 @@ When possible, use the `withIsMobile` and `useIsMobile` for mobile devices detec
 | children           | node  | yes     | -       | React component |
 | breakpoints        | { xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Min breakpoints     |
 | breakpointsMax     | { xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Max breakpoints |
-| mediaQueries       | { _initial: string, xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Represents the screen media queries `(If this is passed breakpoints and breakpointsMax is obsolete)`  |
+| mediaQueries       | { _initial: string, xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Represents the screen media queries `(If this is passed, breakpoints and breakpointsMax props are obsolete)`  |
+| mobileBreakpoint   | '_initial' <br>&#124;&nbsp; 'xs' <br>&#124;&nbsp; 'sm' <br>&#124;&nbsp; 'md' <br>&#124;&nbsp; 'lg'  <br>&#124;&nbsp;  'xl'  | no    | -       | It's considered mobile until this breakpoint |
 
 ## Object returned by the useResponsive / withResponsive / Responsive:
 
@@ -58,7 +59,7 @@ When possible, use the `withIsMobile` and `useIsMobile` for mobile devices detec
 
 | Key                    | Type    | Description                                                                                  |
 |------------------------|---------|----------------------------------------------------------------------------------------------|
-| isMobile | boolean | If its below the md breakpoint |
+| isMobile | boolean | If it's below the mobile breakpoint defined by mobileBreakpoint |
 | isCalculated           | boolean | False on first render. Once true, it means all breakpoints values are based on the window. |
 
 ## Usage and examples
@@ -73,8 +74,7 @@ The component has five different exported consumption APIs:
 - `withResponsive`: A HoC which passes the responsive data to the `responsive` prop
 - `withIsMobile`: A HoC which passes `isMobile` and `isCalculated` props only
 
-
-### How setup the package
+### How to setup
 
 There are two possible options to configure your responsive provider with `breakpoints` or with `mediaQueries`
 

src/ResponsiveContext.js

@@ -7,6 +7,7 @@ const ResponsiveContext = createContext({
     greaterThan: {},
     is: {},
     orientation: null,
+    mobileBreakpoint: 'md',
 });
 
 export default ResponsiveContext;

src/ResponsiveProvider/index.js

@@ -13,6 +13,7 @@ const ResponsiveProvider = ({
     breakpoints,
     breakpointsMax,
     mediaQueries,
+    mobileBreakpoint,
 }) => {
     const breakpointsWithInitialValue = {
         _initial: '0em',
@@ -52,9 +53,16 @@ const ResponsiveProvider = ({
             mediaType: currentMediaType,
             orientation: currentOrientation,
             isCalculated,
+            mobileBreakpoint,
             ...queriesObjects,
         }),
-        [currentMediaType, currentOrientation, isCalculated, queriesObjects]
+        [
+            currentMediaType,
+            currentOrientation,
+            isCalculated,
+            mobileBreakpoint,
+            queriesObjects,
+        ]
     );
 
     useDebugResponsive(contextObject, currentMediaType);
@@ -77,6 +85,7 @@ const breakpointsPropTypes = {
 ResponsiveProvider.defaultProps = {
     initialMediaType: 'xs',
     defaultOrientation: null,
+    mobileBreakpoint: 'md',
 };
 
 ResponsiveProvider.propTypes = {
@@ -99,6 +108,7 @@ ResponsiveProvider.propTypes = {
         ...breakpointsPropTypes,
         _initial: PropTypes.string,
     }),
+    mobileBreakpoint: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
 };
 
 export default ResponsiveProvider;

src/useIsMobile.js

@@ -1,9 +1,9 @@
-import { useContext, useMemo } from 'react';
-import ResponsiveContext from './ResponsiveContext';
+import { useMemo } from 'react';
+import useResponsive from './useResponsive';
 
 const useIsMobile = () => {
-    const { isCalculated, lessThan } = useContext(ResponsiveContext);
-    const isMobile = lessThan.md;
+    const { isCalculated, lessThan, mobileBreakpoint } = useResponsive();
+    const isMobile = lessThan[mobileBreakpoint];
 
     return useMemo(() => ({ isMobile, isCalculated }), [
         isMobile,

tests/__fixtures__/mockContextContent.js

@@ -25,5 +25,6 @@ export default {
         xs: false,
     },
     mediaType: 'md',
+    mobileBreakpoint: 'md',
     orientation: 'landscape',
 };

tests/__snapshots__/ResponsiveProvider.test.js.snap

@@ -28,6 +28,7 @@ Object {
     "xs": true,
   },
   "mediaType": "_initial",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;
@@ -60,6 +61,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xs",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -92,6 +94,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xs",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;
@@ -124,6 +127,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xs",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;
@@ -156,6 +160,7 @@ Object {
     "xs": false,
   },
   "mediaType": "sm",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;
@@ -188,6 +193,7 @@ Object {
     "xs": false,
   },
   "mediaType": "sm",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -220,6 +226,7 @@ Object {
     "xs": false,
   },
   "mediaType": "md",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -252,6 +259,7 @@ Object {
     "xs": false,
   },
   "mediaType": "md",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;
@@ -284,6 +292,7 @@ Object {
     "xs": false,
   },
   "mediaType": "lg",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -316,6 +325,7 @@ Object {
     "xs": false,
   },
   "mediaType": "lg",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -348,6 +358,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xl",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -380,6 +391,7 @@ Object {
     "xs": false,
   },
   "mediaType": "md",
+  "mobileBreakpoint": "md",
   "orientation": "landscape",
 }
 `;
@@ -412,6 +424,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xs",
+  "mobileBreakpoint": "md",
   "orientation": null,
 }
 `;
@@ -444,6 +457,7 @@ Object {
     "xs": false,
   },
   "mediaType": "xl",
+  "mobileBreakpoint": "md",
   "orientation": "portrait",
 }
 `;

tests/useIsMobile.test.js

@@ -28,11 +28,12 @@ describe('useIsMobile()', () => {
         unmockMatchMedia();
     });
 
-    test('should return the values from the hook correctly, if is desktop', () => {
-        window.resizeTo(1024, 768);
+    test('should return not isMobile when window size md and mobile breakpoint md', () => {
+        const windowSizeMd = 960;
+        window.resizeTo(windowSizeMd, 768);
 
         render(
-            <ResponsiveProvider {...props}>
+            <ResponsiveProvider {...props} mobileBreakpoint="md">
                 <MockComponent>{mockRenderProp}</MockComponent>
             </ResponsiveProvider>
         );
@@ -44,11 +45,46 @@ describe('useIsMobile()', () => {
         });
     });
 
-    test('should return the values from the hook correctly, if is mobile', () => {
-        window.resizeTo(375, 812);
+    test('should return isMobile when window size sm and mobile breakpoint md', () => {
+        const windowSizeSm = 576;
+        window.resizeTo(windowSizeSm, 768);
 
         render(
-            <ResponsiveProvider {...props}>
+            <ResponsiveProvider {...props} mobileBreakpoint="md">
+                <MockComponent>{mockRenderProp}</MockComponent>
+            </ResponsiveProvider>
+        );
+
+        expect(mockRenderProp).toHaveBeenCalledTimes(2);
+        expect(mockRenderProp).toHaveBeenLastCalledWith({
+            isMobile: true,
+            isCalculated: true,
+        });
+    });
+
+    test('should return not isMobile when window size sm and mobile breakpoint sm', () => {
+        const windowSizeSm = 576;
+        window.resizeTo(windowSizeSm, 768);
+
+        render(
+            <ResponsiveProvider {...props} mobileBreakpoint="sm">
+                <MockComponent>{mockRenderProp}</MockComponent>
+            </ResponsiveProvider>
+        );
+
+        expect(mockRenderProp).toHaveBeenCalledTimes(2);
+        expect(mockRenderProp).toHaveBeenLastCalledWith({
+            isMobile: false,
+            isCalculated: true,
+        });
+    });
+
+    test('should return isMobile when window size sm and mobile breakpoint sm', () => {
+        const windowSizeXs = 320;
+        window.resizeTo(windowSizeXs, 768);
+
+        render(
+            <ResponsiveProvider {...props} mobileBreakpoint="sm">
                 <MockComponent>{mockRenderProp}</MockComponent>
             </ResponsiveProvider>
         );

yarn.lock

@@ -3021,7 +3021,7 @@ debug@^3.1.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@*, debuglog@^1.0.1:
+debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -4547,7 +4547,7 @@ import-local@^2.0.0:
     pkg-dir "^3.0.0"
     resolve-cwd "^2.0.0"
 
-imurmurhash@*, imurmurhash@^0.1.4:
+imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -5977,11 +5977,6 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash._baseindexof@*:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
-  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
-
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -5990,33 +5985,11 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@*:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
-  integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
-
-lodash._cacheindexof@*:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
-  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
-
-lodash._createcache@*:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
-  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
-  dependencies:
-    lodash._getnative "^3.0.0"
-
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@*, lodash._getnative@^3.0.0:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
-  integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
-
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -6057,11 +6030,6 @@ lodash.isstring@^4.0.1:
   resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
   integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
 
-lodash.restparam@*:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
-  integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=
-
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"