Update to handle null and empty values

.travis.yml

@@ -1,4 +1,4 @@
 language: node_js
 node_js:
-  - "10"
+  - "12"
 cache: npm

README.md

@@ -29,9 +29,11 @@ When creating apps with easily shareable URLs, you often want to encode state as
 Using npm:
 
 ```
-$ npm install --save use-query-params
+$ npm install --save use-query-params query-string
 ```
 
+Note: There is a peer dependency on [query-string](https://github.com/sindresorhus/query-string). For IE11 support, use v5.1.1, otherwise use v6.
+
 Link your routing system (e.g., [React Router example](https://github.com/pbeshai/use-query-params/blob/master/examples/react-router/src/index.tsx), [Reach Router example](https://github.com/pbeshai/use-query-params/blob/master/examples/reach-router/src/index.tsx)):
 
 ```js
@@ -54,6 +56,8 @@ ReactDOM.render(
 
 ### Usage
 
+Be sure to add **QueryParamProvider** as shown in Installation above. 
+
 Add the hook to your component. There are two options: `useQueryParam`:
 
 ```js
@@ -87,16 +91,17 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  withDefault,
 } from 'use-query-params';
 
 const UseQueryParamsExample = () => {
   // something like: ?x=123&q=foo&filters=a&filters=b&filters=c in the URL
   const [query, setQuery] = useQueryParams({
     x: NumberParam,
     q: StringParam,
-    filters: ArrayParam,
+    filters: withDefault(ArrayParam, []),
   });
-  const { x: num, q: searchQuery, filters = [] } = query;
+  const { x: num, q: searchQuery, filters } = query;
 
   return (
     <div>
@@ -130,10 +135,11 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  withDefault,
 } from 'use-query-params';
 
 const WithQueryParamsExample = ({ query, setQuery }: any) => {
-  const { x: num, q: searchQuery, filters = [] } = query;
+  const { x: num, q: searchQuery, filters } = query;
 
   return (
     <div>
@@ -158,7 +164,7 @@ const WithQueryParamsExample = ({ query, setQuery }: any) => {
 export default withQueryParams({
   x: NumberParam,
   q: StringParam,
-  filters: ArrayParam,
+  filters: withDefault(ArrayParam, []),
 }, WithQueryParamsExample);
 ```
 
@@ -171,19 +177,20 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  withDefault,
 } from 'use-query-params';
 
 const RenderPropsExample = () => {
   const queryConfig = {
     x: NumberParam,
     q: StringParam,
-    filters: ArrayParam,
+    filters: withDefault(ArrayParam, []),
   };
   return (
     <div>
       <QueryParams config={queryConfig}>
         {({ query, setQuery }) => {
-          const { x: num, q: searchQuery, filters = [] } = query;
+          const { x: num, q: searchQuery, filters } = query;
           return (
             <>
               <h1>num is {num}</h1>
@@ -238,7 +245,7 @@ A few basic [examples](https://github.com/pbeshai/use-query-params/tree/master/e
 - [Type Definitions](https://github.com/pbeshai/use-query-params/blob/master/src/types.ts) and from [serialize-query-params](https://github.com/pbeshai/serialize-query-params/blob/master/src/types.ts).
 - [Serialization Utility Functions](https://github.com/pbeshai/serialize-query-params/blob/master/src/serialize.ts)
 
-For convenience, use-query-params exports all of the [serialize-query-params](https://github.com/pbeshai/serialize-query-params) library. This includes most functions from [query-string](https://github.com/sindresorhus/query-string), which is used internally.
+For convenience, use-query-params exports all of the [serialize-query-params](https://github.com/pbeshai/serialize-query-params) library.
 
 #### UrlUpdateType
 

examples/react-router/package.json

@@ -8,6 +8,7 @@
     "@types/react": "^16.8.7",
     "@types/react-dom": "^16.8.2",
     "@types/react-router-dom": "^4.3.1",
+    "query-string": "^6.12.1",
     "react": "^16.8.4",
     "react-dom": "^16.8.4",
     "react-router-dom": "^4.3.1",

examples/react-router/src/ReadmeExample2.tsx

@@ -4,15 +4,17 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  QueryParamConfig,
+  withDefault,
 } from 'use-query-params';
 
 const UseQueryParamsExample = () => {
   const [query, setQuery] = useQueryParams({
     x: NumberParam,
     q: StringParam,
-    filters: ArrayParam,
+    filters: withDefault(ArrayParam, []),
   });
-  const { x: num, q: searchQuery, filters = [] } = query;
+  const { x: num, q: searchQuery, filters } = query;
 
   return (
     <div>

examples/react-router/src/ReadmeExample3.tsx

@@ -4,11 +4,12 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  withDefault,
 } from 'use-query-params';
 
 const UseQueryParamsExample = ({ query, setQuery }: any) => {
   const { x: num, q: searchQuery, filters = [] } = query;
-
+  console.log('got filters =', filters, query);
   return (
     <div>
       <h1>num is {num}</h1>
@@ -33,7 +34,7 @@ export default withQueryParams(
   {
     x: NumberParam,
     q: StringParam,
-    filters: ArrayParam,
+    filters: withDefault(ArrayParam, []),
   },
   UseQueryParamsExample
 );

examples/react-router/src/ReadmeExample4.tsx

@@ -4,13 +4,14 @@ import {
   StringParam,
   NumberParam,
   ArrayParam,
+  withDefault,
 } from 'use-query-params';
 
 const RenderPropsExample = () => {
   const queryConfig = {
     x: NumberParam,
     q: StringParam,
-    filters: ArrayParam,
+    filters: withDefault(ArrayParam, []),
   };
   return (
     <div>

examples/react-router/src/UseQueryParamExample.tsx

@@ -8,7 +8,7 @@ import {
 
 const MyParam = {
   encode: (val: number) => `MY_${val}`,
-  decode: (input: string | string[] | undefined) => {
+  decode: (input: string | (string| null)[] | null | undefined) => {
     const str = input instanceof Array ? input[0] : input;
     return str == null ? undefined : +str.split('_')[1];
   },
@@ -84,7 +84,7 @@ const UseQueryParamExample = () => {
             </tr>
             <tr>
               <td>anyp</td>
-              <td>{anyp}</td>
+              <td>{anyp as any}</td>
               <td>{typeof anyp}</td>
               <td>
                 <button
@@ -107,7 +107,7 @@ const UseQueryParamExample = () => {
               <td>arr</td>
               <td>
                 {arr
-                  ? arr.map((d: string, i: number) => (
+                  ? arr.map((d: string | null, i: number) => (
                       <div key={i}>
                         arr[{i}] = {d}
                       </div>

package.json

@@ -41,30 +41,31 @@
   "author": "Peter Beshai <peter.beshai@gmail.com>",
   "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.3.4",
-    "@babel/preset-env": "^7.3.4",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.3.3",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
     "@testing-library/jest-dom": "^4.1.0",
     "@testing-library/react": "^9.1.4",
     "@types/jest": "^24.0.11",
     "@types/react": "^16.8.25",
     "@typescript-eslint/eslint-plugin": "^2.2.0",
     "@typescript-eslint/parser": "^2.2.0",
-    "babel-jest": "^24.5.0",
+    "babel-jest": "^25.3.0",
     "eslint": "^6.3.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^2.1.2",
     "husky": "^3.0.5",
-    "jest": "^24.5.0",
+    "jest": "^25.3.0",
     "lint-staged": "^9.2.5",
-    "prettier": "^1.18.2",
+    "prettier": "^2.0.4",
+    "query-string": "^6.12.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
     "react-hooks-testing-library": "^0.3.7",
-    "rimraf": "^3.0.0",
-    "typescript": "^3.3.3333"
+    "rimraf": "^3.0.2",
+    "typescript": "^3.8.3"
   },
   "peerDependencies": {
     "react": ">=16.8.0",

src/__tests__/helpers.ts

@@ -1,8 +1,5 @@
-import {
-  stringify,
-  parse as parseQueryString,
-  EncodedQueryWithNulls,
-} from 'serialize-query-params';
+import { EncodedQueryWithNulls } from 'serialize-query-params';
+import { stringify, parse as parseQueryString } from 'query-string';
 
 // if passed a location, will mutate it so we can see what changes are being made
 export function makeMockHistory(location: any = {}) {

src/__tests__/updateUrlQuery-test.ts

@@ -11,8 +11,14 @@ describe('updateUrlQuery', () => {
     const history = makeMockHistory();
     // test updating existing query param
     updateUrlQuery(
-      { foo: '123' },
-      makeMockLocation({ foo: '521', bar: 'zzz' }),
+      { foo: '123', emp: '', nul: null, und: undefined },
+      makeMockLocation({
+        foo: '521',
+        bar: 'zzz',
+        emp: 'emp',
+        nul: 'nul',
+        und: 'und',
+      }),
       history,
       'replaceIn'
     );
@@ -22,13 +28,27 @@ describe('updateUrlQuery', () => {
     expect(calledReplaceQuery(history, 0)).toEqual({
       foo: '123',
       bar: 'zzz',
+      emp: '',
+      nul: null,
+      // und is removed
     });
 
     // test when no query params
     updateUrlQuery({ foo: '123' }, makeMockLocation({}), history, 'replaceIn');
     expect(calledReplaceQuery(history, 1)).toEqual({
       foo: '123',
     });
+
+    // test when removing query params
+    updateUrlQuery(
+      { foo: undefined },
+      makeMockLocation({ foo: '123', bar: 'zzz' }),
+      history,
+      'replaceIn'
+    );
+    expect(calledReplaceQuery(history, 2)).toEqual({
+      bar: 'zzz',
+    });
   });
 
   it('pushIn', () => {
@@ -53,6 +73,17 @@ describe('updateUrlQuery', () => {
     expect(calledPushQuery(history, 1)).toEqual({
       foo: '123',
     });
+
+    // test when removing query params
+    updateUrlQuery(
+      { foo: undefined },
+      makeMockLocation({ foo: '123', bar: 'zzz' }),
+      history,
+      'pushIn'
+    );
+    expect(calledPushQuery(history, 2)).toEqual({
+      bar: 'zzz',
+    });
   });
 
   it('replace', () => {

src/useQueryParam.ts

@@ -3,6 +3,9 @@ import {
   parse as parseQueryString,
   parseUrl as parseQueryURL,
   stringify,
+} from 'query-string';
+
+import {
   EncodedQueryWithNulls,
   StringParam,
   QueryParamConfig,
@@ -87,10 +90,6 @@ export const useQueryParam = <D, D2 = D>(
   // decode if the encoded value has changed, otherwise
   // re-use memoized value
   const decodedValue = React.useMemo(() => {
-    if (encodedValue == null) {
-      return undefined;
-    }
-
     return paramConfig.decode(encodedValue);
   }, [arraySafeEncodedValue, paramConfig]); // eslint-disable-line react-hooks/exhaustive-deps
 

src/useQueryParams.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { parse as parseQueryString } from 'query-string';
 import {
-  parse as parseQueryString,
   encodeQueryParams,
   EncodedQueryWithNulls,
   DecodedValueMap,
@@ -74,7 +74,7 @@ export const useQueryParams = <QPCMap extends QueryParamConfigMap>(
   // we reuse the logic to not recreate objects
   const paramNames = Object.keys(paramConfigMap);
   const paramValues = paramNames.map(
-    paramName =>
+    (paramName) =>
       useQueryParam(paramName, paramConfigMap[paramName], rawQuery)[0]
   );
 

src/withQueryParams.tsx

@@ -23,17 +23,17 @@ export function withQueryParams<
   P extends InjectedQueryProps<QPCMap>
 >(paramConfigMap: QPCMap, WrappedComponent: React.ComponentType<P>) {
   // return a FC that takes props excluding query and setQuery
-  const Component: React.FC<Diff<P, InjectedQueryProps<QPCMap>>> = props => {
+  const Component: React.FC<Diff<P, InjectedQueryProps<QPCMap>>> = (props) => {
     const [query, setQuery] = useQueryParams(paramConfigMap);
 
     // see https://github.com/microsoft/TypeScript/issues/28938#issuecomment-450636046 for why `...props as P`
     return (
       <WrappedComponent query={query} setQuery={setQuery} {...(props as P)} />
     );
   };
-  Component.displayName = `withQueryParams(${WrappedComponent.displayName ||
-    WrappedComponent.name ||
-    'Component'})`;
+  Component.displayName = `withQueryParams(${
+    WrappedComponent.displayName || WrappedComponent.name || 'Component'
+  })`;
 
   return Component;
 }