react-router-use-location-state - npm Package Compare versions

Comparing version 2.3.1 to 2.4.0

dist/helpers/useRouter.d.ts

@@ -1,1 +0,1 @@
-export declare function useRouter(): import("react-router").RouteComponentProps<{}, import("react-router").StaticContext, any>;
+export declare function useRouter(): import("react-router").RouteComponentProps<{}, import("react-router").StaticContext, import("history").History.PoorMansUnknown>;

dist/react-router-use-location-state.cjs.js

@@ -10,14 +10,14 @@ 'use strict';
 /*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+Copyright (c) Microsoft Corporation.
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
@@ -61,2 +61,5 @@
 }
+function useQueryReducer(itemName, reducer, initialState, queryStateOpts) {
+    return useLocationState$1.useQueryReducer(itemName, reducer, initialState, __assign({ queryStringInterface: useReactRouterQueryStringInterface() }, queryStateOpts));
+}
 
@@ -92,4 +95,9 @@ function useReactRouterLocationStateInterface() {
 }
+function useLocationReducer(itemName, reducer, initialState, locationStateOpts) {
+    return useLocationState$1.useLocationReducer(itemName, reducer, initialState, __assign({ locationStateInterface: useReactRouterLocationStateInterface() }, locationStateOpts));
+}
 
+exports.useLocationReducer = useLocationReducer;
 exports.useLocationState = useLocationState;
+exports.useQueryReducer = useQueryReducer;
 exports.useQueryState = useQueryState;

dist/react-router-use-location-state.d.ts

@@ -1,2 +0,3 @@
-export { useQueryState } from './useQueryState/useQueryState';
-export { useLocationState } from './useLocationState/useLocationState';
+export * from './useQueryState/useQueryState';
+export * from './useLocationState/useLocationState';
+export type { QueryDispatch, LocationDispatch, Reducer, ReducerWithoutAction, ReducerState, ReducerAction, LazyValueFn, SetStateAction, } from 'use-location-state';

dist/react-router-use-location-state.esm.js

@@ -1,2 +0,2 @@
-import { useQueryState as useQueryState$1, LOCATION_STATE_KEY, useLocationState as useLocationState$1 } from 'use-location-state';
+import { useQueryState as useQueryState$1, useQueryReducer as useQueryReducer$1, LOCATION_STATE_KEY, useLocationState as useLocationState$1, useLocationReducer as useLocationReducer$1 } from 'use-location-state';
 import { useContext } from 'react';
@@ -6,14 +6,14 @@ import { __RouterContext } from 'react-router';
 /*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
+Copyright (c) Microsoft Corporation.
 
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
 
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
@@ -57,2 +57,5 @@
 }
+function useQueryReducer(itemName, reducer, initialState, queryStateOpts) {
+    return useQueryReducer$1(itemName, reducer, initialState, __assign({ queryStringInterface: useReactRouterQueryStringInterface() }, queryStateOpts));
+}
 
@@ -88,3 +91,6 @@ function useReactRouterLocationStateInterface() {
 }
+function useLocationReducer(itemName, reducer, initialState, locationStateOpts) {
+    return useLocationReducer$1(itemName, reducer, initialState, __assign({ locationStateInterface: useReactRouterLocationStateInterface() }, locationStateOpts));
+}
 
-export { useLocationState, useQueryState };
+export { useLocationReducer, useLocationState, useQueryReducer, useQueryState };

dist/useLocationState/useLocationState.d.ts

@@ -1,2 +0,3 @@
-import { SetLocationState } from 'use-location-state';
+import { LocationStateOpts, Reducer, ReducerState, SetLocationState } from 'use-location-state';
 export declare function useLocationState<S>(itemName: string, defaultValue: S | (() => S)): [S, SetLocationState<S>];
+export declare function useLocationReducer<R extends Reducer<any, any>>(itemName: string, reducer: R, initialState: ReducerState<R>, locationStateOpts?: LocationStateOpts): [any, import("use-location-state").LocationDispatch<any>];

dist/useQueryState/useQueryState.d.ts

@@ -1,2 +0,4 @@
-import { QueryStateOpts, SetQueryStateItemFn } from 'use-location-state';
-export declare function useQueryState<T>(itemName: string, defaultValue: T, queryStateOpts?: QueryStateOpts): [T, SetQueryStateItemFn<T>];
+/// <reference types="react" />
+import { QueryStateOpts, Reducer, ReducerState } from 'use-location-state';
+export declare function useQueryState<T>(itemName: string, defaultValue: T, queryStateOpts?: QueryStateOpts): [T, import("use-location-state").QueryDispatch<import("use-location-state").SetStateAction<T>>];
+export declare function useQueryReducer<R extends Reducer<any, any>>(itemName: string, reducer: R, initialState: ReducerState<R>, queryStateOpts?: QueryStateOpts): [import("react").ReducerState<R>, import("use-location-state").QueryDispatch<import("use-location-state").ReducerAction<R>>];

package.json

@@ -12,5 +12,5 @@ {
   "dependencies": {
-    "use-location-state": "^2.3.1"
+    "use-location-state": "^2.4.0"
   },
-  "version": "2.3.1",
+  "version": "2.4.0",
   "author": "Felix Leupold <[e-mail]>",
@@ -23,6 +23,6 @@ "homepage": "https://github.com/xiel/use-location-state",
     "react": "^16.9.0",
-    "rollup": "^1.19.3",
-    "rollup-plugin-typescript2": "^0.24.0",
-    "tslib": "^1.9.3",
-    "typescript": "^3.6.3"
+    "rollup": ">=2.0.0",
+    "rollup-plugin-typescript2": ">=0.26.0",
+    "tslib": "*",
+    "typescript": "*"
   },
@@ -45,3 +45,3 @@ "files": [
   },
-  "gitHead": "2248d0e2266c0e971551fe70bcf82fb6941ff2c2"
+  "gitHead": "378cd4bffb30a0f96f0d68b1959fb5050114a5cc"
 }

README.md

@@ -1,5 +0,6 @@
-<h1 style="width: 100%; text-align: center;"> { useLocationState, useQueryState }</h1>
+<div style="width: 100%; text-align: center;">
+    <h1>{ useLocationState, useQueryState }</h1>
+</div>
 
 [![npm (tag)](https://img.shields.io/npm/v/use-location-state/latest.svg)](https://www.npmjs.com/package/use-location-state)
-[![Greenkeeper badge](https://badges.greenkeeper.io/xiel/use-location-state.svg)](https://greenkeeper.io/)
 [![codecov badge](https://img.shields.io/codecov/c/github/xiel/use-location-state/master.svg?color=hotpink)](https://codecov.io/gh/xiel/use-location-state)
@@ -15,7 +16,7 @@ ![GitHub top language](https://img.shields.io/github/languages/top/xiel/use-location-state.svg)
 - makes it easy to share the application in a customizable state
-- __`useLocationState(name, defaultValue)`__
+- **`useLocationState(name, defaultValue)`**
   - restores the latest value after navigation actions (back/forward), by keeping value in `history.state`
   - supported value types: `string | number | boolean | Date | Array | Object`
   - handles complex & nested values - all values that can be serialized are supported
-- __`useQueryState(name, defaultValue)`__
+- **`useQueryState(name, defaultValue)`**
   - restores the latest value from URL (`location.href`) and after navigation actions (back/forward)
@@ -25,3 +26,2 @@ - supported value types: `string | number | boolean | Date | string[]`
   - invalid entries from the query string are discarded and the component will receive the defaultValue instead
-  
 
@@ -36,9 +36,9 @@ <img style="display: block; margin: auto;" src="https://repository-images.githubusercontent.com/182417896/058a9d00-e2e1-11e9-8467-8923219ec500" />
 
-Using __`react-router`__ or another popular router? For the best experience install one of the [router integrations](#router-integration-optional).
+Using **`react-router`** or another popular router? For the best experience install one of the [router integrations](#router-integration-optional).
 
 ## Usage
 
-`useLocationState()` and `useQueryState()` work similar to the `useState()` [hook](https://reactjs.org/docs/hooks-overview.html#state-hook), as they also return the current value and a update function in a tuple `[currentValue, updateValueFn]`. 
+`useLocationState()` and `useQueryState()` work similar to the `useState()` [hook](https://reactjs.org/docs/hooks-overview.html#state-hook), as they also return the current value and a update function in a tuple `[currentValue, updateValueFn]`.
 
-The *important difference* is that __you must pass a name__ before your __default value__ for your state.
+The _important difference_ is that **you must pass a name** before your **default value** for your state.
 
@@ -63,2 +63,3 @@ ```javascript
 ```
+
 The updated state will be restored when the pages reloads and after the user navigated to a new page and comes back using a back/forward action.
@@ -68,3 +69,3 @@
 
- `useQueryState()` is a great, when you want to store information about the current state of you app in the URL. 
+`useQueryState()` is a great, when you want to store information about the current state of you app in the URL.
 
@@ -74,2 +75,3 @@ ```javascript
 ```
+
 The name you pass will be used as a parameter name in the query string, when setting a new value:
@@ -80,2 +82,3 @@
 ```
+
 After calling the update function `setValue()` with a new value, the state will be saved withing the query string of the browser, so that the new state is reproducable after reloads or history navigation (using forward / back button) or by loading the same URL anywhere else.
@@ -92,3 +95,3 @@
 
-In cases where you want the updated state to be represented as a __new entry in the history__ you can pass a options object to the set function, with the method property set to `'push'`. 
+In cases where you want the updated state to be represented as a **new entry in the history** you can pass a options object to the set function, with the method property set to `'push'`.
 
@@ -102,2 +105,3 @@ ```javascript
 ### Example
+
 ```javascript
@@ -110,3 +114,5 @@ import { useQueryState } from 'use-location-state'
     <div>
-      <button type="button" onClick={() => setActive(!active)}>Toggle</button>
+      <button type="button" onClick={() => setActive(!active)}>
+        Toggle
+      </button>
       {active && <p>Some active content</p>}
@@ -117,2 +123,3 @@ </div>
 ```
+
 <a href="https://codesandbox.io/embed/zqm4o19yrx">
@@ -122,3 +129,2 @@ <img width="150" alt="Example in CodeSandbox" src="https://codesandbox.io/static/img/play-codesandbox.svg">
 
-
 ### Example with multiple useQueryState hooks in one component
@@ -136,2 +142,3 @@
 ```
+
 <a href="https://codesandbox.io/embed/github/xiel/use-location-state/tree/master/src/examples/use-location-state/?fontsize=14&module=%2Fsrc%2Fpages%2FQueryStateDemo.tsx">
@@ -145,3 +152,3 @@ <img width="150" alt="Example in CodeSandbox" src="https://codesandbox.io/static/img/play-codesandbox.svg">
 
-We plan to provide clean and easy-to-use integrations for all popular routers. 
+We plan to provide clean and easy-to-use integrations for all popular routers.
 At the moment we provide integrations for:
@@ -154,9 +161,13 @@
 ```
+
 ```javascript
 import { useLocationState, useQueryState } from 'react-router-use-location-state'
 ```
+
 Usage works the same as described above, except that the URL will look like this now:
+
 ```javascript
 http://localhost:3000/?itemName=different+value
 ```
+
 <a href="https://codesandbox.io/s/github/xiel/use-location-state/tree/master/src/examples/react-router-use-location-state?fontsize=14&module=%2Fsrc%2Fpages%2FQueryStateDemo.tsx">
@@ -166,2 +177,15 @@ <img width="150" alt="Edit react-router-use-location-state-example" src="https://codesandbox.io/static/img/play-codesandbox.svg">
 
+### Gatsby & @reach/router
+
+Gatsby & Reach Router are supported. Gatsby currently always scrolls up on location (state) changes. To keep the scroll position, when you update location state using the update function of `useLocationState`, add these lines to the **gatsby-browser.js** file in gatsby root folder.
+
+```javascript
+// keeps same scroll pos when history state is pushed/replaced (same location === same position)
+// see: https://www.gatsbyjs.org/docs/browser-apis/#shouldUpdateScroll
+exports.shouldUpdateScroll = ({ routerProps, getSavedScrollPosition }) => {
+  const currentPosition = getSavedScrollPosition(routerProps.location)
+  return currentPosition || true
+}
+```
+
 ### More routers soon - work in progress
@@ -176,4 +200,4 @@
 ```javascript
-import 'react-app-polyfill/ie11';
-import 'react-app-polyfill/stable';
+import 'react-app-polyfill/ie11'
+import 'react-app-polyfill/stable'
 ```

No alert changes

Improved metrics

Total package byte prevSize

20767

increased by14.72%

Number of package files

13

increased by18.18%

Lines of code

189

increased by12.5%

Number of lines in readme file

187

increased by14.72%

Dependency changes

• Updateduse-location-state@^2.4.0