feat: add support for meaningful default value when no arguments prov…

…ided for the hook
wintercounter · Nov 7, 2019 · 38352f5 · 38352f5
1 parent f1b1163
commit 38352f5
Show file tree

Hide file tree

Showing 3 changed files with 118 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -44,6 +44,8 @@ setup({
 
 # Usage
 
+## With passing values
+
 ```js
 useBreakpoint(defaultValue, breakpointValues)
 
@@ -57,6 +59,88 @@ useBreakpoint(defaultValue, breakpointValues)
 is enough instead of `[['mobile', 300]]`
 ```
 
+## Without passing values
+
+In case you dont specify any value to the hook, it'll return a generated
+object including boolean values for each breakpoint keys that's being
+defined in options.
+
+It'll return the following object with the basic setup.
+
+```
+{
+      isLandscape: false,
+      isPortrait: true,
+      isHDPI: false,
+      isMicro: false,
+      isMobile: true,
+      isTablet: false,
+      isSmall: false,
+      isMedium: false,
+      isLarge: false,
+      'is-Micro': false,
+      'is|Micro': false,
+      'isMicro+': true,
+      'is-Micro+': true,
+      'is|Micro+': true,
+      'isMicro-': false,
+      'is-Micro-': false,
+      'is|Micro-': false,
+      'is-Mobile': true,
+      'is|Mobile': true,
+      'isMobile+': true,
+      'is-Mobile+': true,
+      'is|Mobile+': true,
+      'isMobile-': true,
+      'is-Mobile-': true,
+      'is|Mobile-': true,
+      'is-Tablet': false,
+      'is|Tablet': false,
+      'isTablet+': false,
+      'is-Tablet+': false,
+      'is|Tablet+': false,
+      'isTablet-': true,
+      'is-Tablet-': true,
+      'is|Tablet-': true,
+      'is-Small': false,
+      'is|Small': false,
+      'isSmall+': false,
+      'is-Small+': false,
+      'is|Small+': false,
+      'isSmall-': true,
+      'is-Small-': true,
+      'is|Small-': true,
+      'is-Medium': false,
+      'is|Medium': false,
+      'isMedium+': false,
+      'is-Medium+': false,
+      'is|Medium+': false,
+      'isMedium-': true,
+      'is-Medium-': true,
+      'is|Medium-': true,
+      'is-Large': false,
+      'is|Large': false,
+      'isLarge+': false,
+      'is-Large+': false,
+      'is|Large+': false,
+      'isLarge-': true,
+      'is-Large-': true,
+      'is|Large-': true
+    }
+```
+
+Usage
+```js
+const { isMobile } = useBreakpoint()
+
+// The above is basically a replacement for
+const isMobile = useBreakpoint(false, ['mobile', true])
+```
+
+> You can also access the values with suffix and prefix but you need
+> to rename the variables because it contains invalid character:
+> `const { 'isMobile+': isMobile } = useBreakpoint()`
+
 Component example
 
 ```jsx
@@ -106,6 +190,11 @@ You can also control your value to behave as `and up` and `and down`.
 
 # FAQ
 
+## Is there any best practice suggestion?
+
+Yes! Use as less hooks as possible. It's always faster to have a single
+`isMobile` variable and have simple conditions based on it.
+
 ## Which rule is being prioritized
 
 The hook uses _eager_ evaluation, so the first truthy breakpoint value

diff --git a/src/test.ts b/src/test.ts
@@ -33,4 +33,9 @@ describe('useBreakpoint', () => {
     it(`should work with single array value`, () => {
         expect(calculateValue(300, ['mobile+', 500], 400)).toBe(500)
     })
+
+    it(`should return 'is{Key}' properties if no props were given`, () => {
+        console.log(calculateValue(undefined, [], 500))
+        expect(calculateValue(undefined, [], 500).isMobile).toBe(true)
+    })
 })
diff --git a/src/useBreakpoint.ts b/src/useBreakpoint.ts
@@ -23,8 +23,31 @@ type TCalculateValue = (
     iw?: number
 ) => typeof defaultValue
 
+// We will save the calculated value until innerWidth changes
+let cachedProplessValue = {}
+const calculateProplessValue = function(iw) {
+    if (cachedProplessValue[iw]) return cachedProplessValue[iw]
+
+    const isLandscape = getIsLandscape()
+    const proplessValue = { isLandscape, isPortrait: !isLandscape, isHDPI: window.devicePixelRatio > 1 }
+
+    for (const [[firstLetter, secondLetter, ...restLetter], [from, to]] of Object.entries(options.breakpoints)) {
+        const key = [LANDSCAPE, PORTRAIT].includes(firstLetter)
+            ? `${firstLetter}${secondLetter.toUpperCase()}${restLetter.join('')}`
+            : `${firstLetter.toUpperCase()}${secondLetter}${restLetter.join('')}`
+        proplessValue[`is${key}`] = (iw > from && iw <= to)
+    }
+
+    cachedProplessValue = { [iw]: proplessValue }
+
+    return proplessValue
+}
+
 /* eslint-disable no-continue */
 export const calculateValue: TCalculateValue = function(defaultValue, breakpointValues = [], iw = window.innerWidth) {
+    if (defaultValue === undefined && !breakpointValues.length) {
+        return calculateProplessValue(iw)
+    }
     const isLandscape = getIsLandscape()
     if (!breakpointValues || !breakpointValues.length) {
         return defaultValue
@@ -46,7 +69,7 @@ export const calculateValue: TCalculateValue = function(defaultValue, breakpoint
 export const useBreakpoint = function(defaultValue, breakpointValues) {
     const [innerWidth, setInnerWidth] = useState(window.innerWidth)
     useResize(() => setInnerWidth(window.innerWidth))
-    return useMemo(() => calculateValue(defaultValue, breakpointValues), [innerWidth, defaultValue])
+    return useMemo(() => calculateValue(defaultValue, breakpointValues, innerWidth), [innerWidth, defaultValue])
 }
 
 interface IOptions {