use-location-state - npm Package Compare versions

Comparing version 2.1.5 to 2.2.0

dist/hooks/types.d.ts

@@ -17,3 +17,3 @@ import { QueryStateMerge } from 'query-state-core';
 export interface SetQueryStringOptions {
-    method?: 'push' | 'replace';
+    method?: 'replace' | 'push';
 }

dist/use-location-state.cjs.js

@@ -40,21 +40,28 @@ 'use strict';
         getQueryString: function () {
-            if (!enabled) {
+            if (!enabled)
                 return '';
-            }
             return window.location.hash;
         },
-        setQueryString: function (newQueryString) {
-            if (enabled) {
-                window.location.hash = newQueryString;
-                setR(function (r) { return r + 1; });
-            }
+        setQueryString: function (newQueryString, _a) {
+            var _b = _a.method, method = _b === void 0 ? 'replace' : _b;
+            if (!enabled)
+                return;
+            // use history to update hash using replace / push
+            window.history[method === 'replace' ? 'replaceState' : 'pushState'](window.history.state, '', '#' + newQueryString);
+            // manually dispatch a hashchange event (replace state does not trigger this event)
+            // so all subscribers get notified (old way for IE11)
+            var customEvent = document.createEvent('CustomEvent');
+            customEvent.initEvent('hashchange', false, false);
+            window.dispatchEvent(customEvent);
+            setR(function (r) { return r + 1; });
         },
     }); }, [enabled]);
     // this state is used to trigger re-renders
-    var _c = react.useState(hashQSI.getQueryString()), setR = _c[1];
+    var _c = react.useState(0), setR = _c[1];
     react.useEffect(function () {
-        if (!enabled) {
+        if (!enabled)
             return;
-        }
-        var hashChangeHandler = function () { return setR(function (r) { return r + 1; }); };
+        var hashChangeHandler = function () {
+            setR(function (r) { return r + 1; });
+        };
         window.addEventListener('hashchange', hashChangeHandler, false);
@@ -72,3 +79,3 @@ return function () { return window.removeEventListener('hashchange', hashChangeHandler, false); };
     var _a = react.useState(), setLatestMergedQueryString = _a[1];
-    var queryState = react.useMemo(function () { return (__assign({}, defaultQueryState, queryStateCore.parseQueryState(queryString))); }, [defaultQueryState, queryString]);
+    var queryState = react.useMemo(function () { return (__assign(__assign({}, defaultQueryState), queryStateCore.parseQueryState(queryString))); }, [defaultQueryState, queryString]);
     var ref = react.useRef({
@@ -94,3 +101,3 @@ defaultQueryState: defaultQueryState,
         // retrieve the last value (by re-executing the search getter)
-        var currentQueryState = __assign({}, defaultQueryState, queryStateCore.parseQueryState(activeQSI.getQueryString()));
+        var currentQueryState = __assign(__assign({}, defaultQueryState), queryStateCore.parseQueryState(activeQSI.getQueryString()));
         var mergedQueryString = queryStateCore.createMergedQuery(currentQueryState || {}, newState, stripOverwrite);
@@ -116,2 +123,4 @@ activeQSI.setQueryString(mergedQueryString, opts || {});
     if (queryStateOpts === void 0) { queryStateOpts = {}; }
+    // defaultValue is not allowed to be changed after init
+    defaultValue = react.useState(defaultValue)[0];
     var defaultQueryStateValue = queryStateCore.toQueryStateValue(defaultValue);
@@ -153,3 +162,3 @@ var defaultQueryState = react.useMemo(function () {
         setQueryState((_a = {}, _a[itemName] = newQueryStateValue, _a), opts);
-    }, [itemName, setQueryState]);
+    }, [defaultValue, itemName, setQueryState]);
     // fallback to default value
@@ -171,3 +180,3 @@ var value = defaultValue;
     var hashQSI = useLocationHashQueryStringInterface();
-    return useQueryState(itemName, defaultValue, __assign({}, queryStateOpts, { queryStringInterface: hashQSI }));
+    return useQueryState(itemName, defaultValue, __assign(__assign({}, queryStateOpts), { queryStringInterface: hashQSI }));
 }
@@ -174,0 +183,0 @@

dist/use-location-state.d.ts

@@ -0,2 +1,3 @@
+export * from './hooks/types';
 export { default as useQueryState } from './hooks/useQueryState';
 export { default as useHashQueryState } from './hooks/useHashQueryState';

dist/use-location-state.esm.js

@@ -36,21 +36,28 @@ import { useMemo, useState, useEffect, useRef, useCallback } from 'react';
         getQueryString: function () {
-            if (!enabled) {
+            if (!enabled)
                 return '';
-            }
             return window.location.hash;
         },
-        setQueryString: function (newQueryString) {
-            if (enabled) {
-                window.location.hash = newQueryString;
-                setR(function (r) { return r + 1; });
-            }
+        setQueryString: function (newQueryString, _a) {
+            var _b = _a.method, method = _b === void 0 ? 'replace' : _b;
+            if (!enabled)
+                return;
+            // use history to update hash using replace / push
+            window.history[method === 'replace' ? 'replaceState' : 'pushState'](window.history.state, '', '#' + newQueryString);
+            // manually dispatch a hashchange event (replace state does not trigger this event)
+            // so all subscribers get notified (old way for IE11)
+            var customEvent = document.createEvent('CustomEvent');
+            customEvent.initEvent('hashchange', false, false);
+            window.dispatchEvent(customEvent);
+            setR(function (r) { return r + 1; });
         },
     }); }, [enabled]);
     // this state is used to trigger re-renders
-    var _c = useState(hashQSI.getQueryString()), setR = _c[1];
+    var _c = useState(0), setR = _c[1];
     useEffect(function () {
-        if (!enabled) {
+        if (!enabled)
             return;
-        }
-        var hashChangeHandler = function () { return setR(function (r) { return r + 1; }); };
+        var hashChangeHandler = function () {
+            setR(function (r) { return r + 1; });
+        };
         window.addEventListener('hashchange', hashChangeHandler, false);
@@ -68,3 +75,3 @@ return function () { return window.removeEventListener('hashchange', hashChangeHandler, false); };
     var _a = useState(), setLatestMergedQueryString = _a[1];
-    var queryState = useMemo(function () { return (__assign({}, defaultQueryState, parseQueryState(queryString))); }, [defaultQueryState, queryString]);
+    var queryState = useMemo(function () { return (__assign(__assign({}, defaultQueryState), parseQueryState(queryString))); }, [defaultQueryState, queryString]);
     var ref = useRef({
@@ -90,3 +97,3 @@ defaultQueryState: defaultQueryState,
         // retrieve the last value (by re-executing the search getter)
-        var currentQueryState = __assign({}, defaultQueryState, parseQueryState(activeQSI.getQueryString()));
+        var currentQueryState = __assign(__assign({}, defaultQueryState), parseQueryState(activeQSI.getQueryString()));
         var mergedQueryString = createMergedQuery(currentQueryState || {}, newState, stripOverwrite);
@@ -112,2 +119,4 @@ activeQSI.setQueryString(mergedQueryString, opts || {});
     if (queryStateOpts === void 0) { queryStateOpts = {}; }
+    // defaultValue is not allowed to be changed after init
+    defaultValue = useState(defaultValue)[0];
     var defaultQueryStateValue = toQueryStateValue(defaultValue);
@@ -149,3 +158,3 @@ var defaultQueryState = useMemo(function () {
         setQueryState((_a = {}, _a[itemName] = newQueryStateValue, _a), opts);
-    }, [itemName, setQueryState]);
+    }, [defaultValue, itemName, setQueryState]);
     // fallback to default value
@@ -167,5 +176,5 @@ var value = defaultValue;
     var hashQSI = useLocationHashQueryStringInterface();
-    return useQueryState(itemName, defaultValue, __assign({}, queryStateOpts, { queryStringInterface: hashQSI }));
+    return useQueryState(itemName, defaultValue, __assign(__assign({}, queryStateOpts), { queryStringInterface: hashQSI }));
 }
 
 export { useHashQueryState, useQueryState };

package.json

@@ -8,8 +8,8 @@ {
   "peerDependencies": {
-    "react": "^16.8.6"
+    "react": "^16.9.0"
   },
   "dependencies": {
-    "query-state-core": "^2.1.5"
+    "query-state-core": "^2.2.0"
   },
-  "version": "2.1.5",
+  "version": "2.2.0",
   "author": "Felix Leupold <[e-mail]>",
@@ -20,7 +20,11 @@ "homepage": "https://github.com/xiel/use-location-state",
     "@types/react": "^16.8.14",
-    "react": "^16.8.6",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-react-app": "^6.0.1",
+    "react": "^16.9.0",
     "rollup": "^1.19.3",
-    "rollup-plugin-typescript2": "^0.22.0",
+    "rollup-plugin-typescript2": "^0.24.0",
     "tslib": "^1.9.3",
-    "typescript": "3.5.1"
+    "typescript": "^3.6.3"
   },
@@ -42,3 +46,3 @@ "files": [
   },
-  "gitHead": "b1d83deb91cb6ff88222dd712a9ce66cd4a8cd9f"
+  "gitHead": "bdcea17b02e683612f00d8f01e6f81fba17bcdc1"
 }

README.md

@@ -51,2 +51,12 @@ # useQueryState()
 
+#### Push
+
+In cases where you want the updated state to be represented as a new entry in the history, you can pass a options argument to the set function, with the method property set to `'push'`. 
+
+```javascript
+setValue('a pushed value', { method: 'push' })
+```
+
+This changes the way this state change is handled when the user navigates. When the user now clicks the Back-Button, this state gets popped and the previous state is restored (instead of eg. navigating away).
+
 ### Example
@@ -53,0 +63,0 @@ ```javascript

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

31079

increased by15.58%

Number of package files

25

increased by31.58%

Lines of code

434

increased by15.43%

Number of lines in readme file

122

increased by8.93%

Worsened metrics

Dev dependency count

10

increased by66.67%

Dependency changes

• Updatedquery-state-core@^2.2.0