@aboutbits/react-pagination - npm Package Compare versions

Comparing version 0.0.8 to 0.0.9

dist/esm/inMemoryPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/esm/inMemoryPagination.js

@@ -14,3 +14,3 @@ var __assign = (this && this.__assign) || function () {
 import { IndexType } from './types';
-export var useSearchAndPagination = function (config) {
+export var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
@@ -21,8 +21,17 @@ var firstPage = indexType === IndexType.ZERO_BASED ? 0 : 1;
         size: pageSize,
-        searchQuery: '',
+        queryParameters: (config === null || config === void 0 ? void 0 : config.defaultQueryParameters) || {},
     }); }, []);
     var _d = useState(initialState), state = _d[0], setState = _d[1];
-    var search = useCallback(function (query) {
+    var updateQuery = useCallback(function (queryParameters) {
         setState(function (currentState) {
-            return __assign(__assign({}, currentState), { page: 0, searchQuery: query });
+            var updatedQueryParameters = __assign(__assign({}, currentState.queryParameters), queryParameters);
+            for (var parameter in queryParameters) {
+                if (!!(config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                    (config.defaultQueryParameters[parameter] === undefined ||
+                        config.defaultQueryParameters[parameter] ===
+                            queryParameters[parameter])) {
+                    delete updatedQueryParameters[parameter];
+                }
+            }
+            return __assign(__assign({}, currentState), { page: 0, queryParameters: updatedQueryParameters });
         });
@@ -41,5 +50,5 @@ }, []);
     return {
-        search: state.searchQuery,
+        queryParameters: state.queryParameters,
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -46,0 +55,0 @@ setPage: setPage,

dist/esm/nextRouterPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/esm/nextRouterPagination.js

@@ -19,3 +19,16 @@ var __assign = (this && this.__assign) || function () {
 }
-export var useSearchAndPagination = function (config) {
+function extractCurrentQueryParameters(query, defaultQueryParameters) {
+    if (!defaultQueryParameters) {
+        return {};
+    }
+    var result = __assign({}, defaultQueryParameters);
+    for (var parameter in defaultQueryParameters) {
+        if (query[parameter] &&
+            getSingleParameterValue(query[parameter]) !== undefined) {
+            result[parameter] = getSingleParameterValue(query[parameter]);
+        }
+    }
+    return result;
+}
+export var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
@@ -29,4 +42,14 @@ var router = useRouter();
     }, [router]);
-    var search = useCallback(function (query) {
-        var params = __assign(__assign({}, router.query), { search: query === '' ? undefined : query });
+    var updateQuery = useCallback(function (queryParameters) {
+        var params = __assign({}, router.query);
+        for (var parameter in queryParameters) {
+            if ((config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                config.defaultQueryParameters[parameter] ===
+                    queryParameters[parameter]) {
+                delete params[parameter];
+            }
+            else {
+                params[parameter] = queryParameters[parameter].toString();
+            }
+        }
         delete params['page'];
@@ -40,5 +63,7 @@ delete params['size'];
         var params = __assign({}, router.query);
-        delete params['search'];
         delete params['page'];
         delete params['size'];
+        for (var parameter in config === null || config === void 0 ? void 0 : config.defaultQueryParameters) {
+            delete params[parameter];
+        }
         router.push({
@@ -49,7 +74,7 @@ query: params,
     return {
-        search: getSingleParameterValue(router.query.search) || '',
+        queryParameters: extractCurrentQueryParameters(router.query, config === null || config === void 0 ? void 0 : config.defaultQueryParameters),
         page: convert(getSingleParameterValue(router.query.page) || null, indexType === IndexType.ZERO_BASED ? 0 : 1),
         size: convert(getSingleParameterValue(router.query.size) || null, pageSize),
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -56,0 +81,0 @@ setPage: setPage,

dist/esm/reactRouterPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/esm/reactRouterPagination.js

@@ -0,1 +1,12 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { useCallback, useMemo } from 'react';
@@ -5,3 +16,15 @@ import { useHistory, useLocation, useRouteMatch } from 'react-router-dom';
 import { convert } from './utils';
-export var useSearchAndPagination = function (config) {
+function extractCurrentQueryParameters(query, defaultQueryParameters) {
+    if (!defaultQueryParameters) {
+        return {};
+    }
+    var result = __assign({}, defaultQueryParameters);
+    for (var parameter in defaultQueryParameters) {
+        if (query.get(parameter)) {
+            result[parameter] = query.get(parameter);
+        }
+    }
+    return result;
+}
+export var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
@@ -12,9 +35,13 @@ var routerHistory = useHistory();
     var params = useMemo(function () { return new URLSearchParams(routeQuery); }, [routeQuery]);
-    var search = useCallback(function (query) {
-        if (query === '') {
-            params.delete('search');
+    var updateQuery = useCallback(function (queryParameters) {
+        for (var parameter in queryParameters) {
+            if ((config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                config.defaultQueryParameters[parameter] ===
+                    queryParameters[parameter]) {
+                params.delete(parameter);
+            }
+            else {
+                params.set(parameter, queryParameters[parameter].toString());
+            }
         }
-        else {
-            params.set('search', query);
-        }
         params.delete('page');
@@ -28,3 +55,5 @@ params.delete('size');
     var clear = useCallback(function () {
-        params.delete('search');
+        for (var parameter in config === null || config === void 0 ? void 0 : config.defaultQueryParameters) {
+            params.delete(parameter);
+        }
         params.delete('page');
@@ -45,7 +74,7 @@ params.delete('size');
     return {
-        search: params.get('search') || '',
+        queryParameters: extractCurrentQueryParameters(params, config === null || config === void 0 ? void 0 : config.defaultQueryParameters),
         page: convert(params.get('page'), indexType === IndexType.ZERO_BASED ? 0 : 1),
         size: convert(params.get('size'), pageSize),
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -52,0 +81,0 @@ setPage: setPage,

dist/esm/types.d.ts

@@ -5,13 +5,15 @@ export declare enum IndexType {
 }
+export declare type QueryParameters = Record<string, string>;
 export declare type Config = {
     indexType?: IndexType;
     pageSize?: number;
+    defaultQueryParameters?: QueryParameters;
 };
 export declare type Actions = {
-    search: (query: string) => void;
+    updateQuery: (query: QueryParameters) => void;
     clear: () => void;
     setPage: (page: number) => void;
 };
-export declare type UseSearchAndPagination = {
-    search: string;
+export declare type UseQueryAndPagination = {
+    queryParameters: QueryParameters;
     page: number;
@@ -21,4 +23,4 @@ size: number;
 };
-export interface IUseSearchAndPagination {
-    (config?: Config): UseSearchAndPagination;
+export interface IUseQueryAndPagination {
+    (config?: Config): UseQueryAndPagination;
 }

dist/inMemoryPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/inMemoryPagination.js

@@ -14,20 +14,29 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchAndPagination = void 0;
+exports.useQueryAndPagination = void 0;
 var react_1 = require("react");
 var types_1 = require("./types");
-var useSearchAndPagination = function (config) {
+var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? types_1.IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
     var firstPage = indexType === types_1.IndexType.ZERO_BASED ? 0 : 1;
-    var initialState = react_1.useMemo(function () { return ({
+    var initialState = (0, react_1.useMemo)(function () { return ({
         page: firstPage,
         size: pageSize,
-        searchQuery: '',
+        queryParameters: (config === null || config === void 0 ? void 0 : config.defaultQueryParameters) || {},
     }); }, []);
-    var _d = react_1.useState(initialState), state = _d[0], setState = _d[1];
-    var search = react_1.useCallback(function (query) {
+    var _d = (0, react_1.useState)(initialState), state = _d[0], setState = _d[1];
+    var updateQuery = (0, react_1.useCallback)(function (queryParameters) {
         setState(function (currentState) {
-            return __assign(__assign({}, currentState), { page: 0, searchQuery: query });
+            var updatedQueryParameters = __assign(__assign({}, currentState.queryParameters), queryParameters);
+            for (var parameter in queryParameters) {
+                if (!!(config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                    (config.defaultQueryParameters[parameter] === undefined ||
+                        config.defaultQueryParameters[parameter] ===
+                            queryParameters[parameter])) {
+                    delete updatedQueryParameters[parameter];
+                }
+            }
+            return __assign(__assign({}, currentState), { page: 0, queryParameters: updatedQueryParameters });
         });
     }, []);
-    var clear = react_1.useCallback(function () {
+    var clear = (0, react_1.useCallback)(function () {
         setState(function () {
@@ -37,3 +46,3 @@ return initialState;
     }, [initialState]);
-    var setPage = react_1.useCallback(function (page) {
+    var setPage = (0, react_1.useCallback)(function (page) {
         setState(function (currentState) {
@@ -44,5 +53,5 @@ return __assign(__assign({}, currentState), { page: page });
     return {
-        search: state.searchQuery,
+        queryParameters: state.queryParameters,
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -55,3 +64,3 @@ setPage: setPage,
 };
-exports.useSearchAndPagination = useSearchAndPagination;
+exports.useQueryAndPagination = useQueryAndPagination;
 //# sourceMappingURL=inMemoryPagination.js.map

dist/nextRouterPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/nextRouterPagination.js

@@ -14,3 +14,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchAndPagination = void 0;
+exports.useQueryAndPagination = void 0;
 var router_1 = require("next/router");
@@ -23,6 +23,19 @@ var react_1 = require("react");
 }
-var useSearchAndPagination = function (config) {
+function extractCurrentQueryParameters(query, defaultQueryParameters) {
+    if (!defaultQueryParameters) {
+        return {};
+    }
+    var result = __assign({}, defaultQueryParameters);
+    for (var parameter in defaultQueryParameters) {
+        if (query[parameter] &&
+            getSingleParameterValue(query[parameter]) !== undefined) {
+            result[parameter] = getSingleParameterValue(query[parameter]);
+        }
+    }
+    return result;
+}
+var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? types_1.IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
-    var router = router_1.useRouter();
-    var setPage = react_1.useCallback(function (page) {
+    var router = (0, router_1.useRouter)();
+    var setPage = (0, react_1.useCallback)(function (page) {
         var params = __assign(__assign({}, router.query), { page: page.toString() });
@@ -33,4 +46,14 @@ router.push({
     }, [router]);
-    var search = react_1.useCallback(function (query) {
-        var params = __assign(__assign({}, router.query), { search: query === '' ? undefined : query });
+    var updateQuery = (0, react_1.useCallback)(function (queryParameters) {
+        var params = __assign({}, router.query);
+        for (var parameter in queryParameters) {
+            if ((config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                config.defaultQueryParameters[parameter] ===
+                    queryParameters[parameter]) {
+                delete params[parameter];
+            }
+            else {
+                params[parameter] = queryParameters[parameter].toString();
+            }
+        }
         delete params['page'];
@@ -42,7 +65,9 @@ delete params['size'];
     }, [router]);
-    var clear = react_1.useCallback(function () {
+    var clear = (0, react_1.useCallback)(function () {
         var params = __assign({}, router.query);
-        delete params['search'];
         delete params['page'];
         delete params['size'];
+        for (var parameter in config === null || config === void 0 ? void 0 : config.defaultQueryParameters) {
+            delete params[parameter];
+        }
         router.push({
@@ -53,7 +78,7 @@ query: params,
     return {
-        search: getSingleParameterValue(router.query.search) || '',
-        page: utils_1.convert(getSingleParameterValue(router.query.page) || null, indexType === types_1.IndexType.ZERO_BASED ? 0 : 1),
-        size: utils_1.convert(getSingleParameterValue(router.query.size) || null, pageSize),
+        queryParameters: extractCurrentQueryParameters(router.query, config === null || config === void 0 ? void 0 : config.defaultQueryParameters),
+        page: (0, utils_1.convert)(getSingleParameterValue(router.query.page) || null, indexType === types_1.IndexType.ZERO_BASED ? 0 : 1),
+        size: (0, utils_1.convert)(getSingleParameterValue(router.query.size) || null, pageSize),
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -64,3 +89,3 @@ setPage: setPage,
 };
-exports.useSearchAndPagination = useSearchAndPagination;
+exports.useQueryAndPagination = useQueryAndPagination;
 //# sourceMappingURL=nextRouterPagination.js.map

dist/reactRouterPagination.d.ts

@@ -1,2 +0,2 @@
-import { IUseSearchAndPagination } from './types';
-export declare const useSearchAndPagination: IUseSearchAndPagination;
+import { IUseQueryAndPagination } from './types';
+export declare const useQueryAndPagination: IUseQueryAndPagination;

dist/reactRouterPagination.js

 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchAndPagination = void 0;
+exports.useQueryAndPagination = void 0;
 var react_1 = require("react");
@@ -8,15 +19,31 @@ var react_router_dom_1 = require("react-router-dom");
 var utils_1 = require("./utils");
-var useSearchAndPagination = function (config) {
+function extractCurrentQueryParameters(query, defaultQueryParameters) {
+    if (!defaultQueryParameters) {
+        return {};
+    }
+    var result = __assign({}, defaultQueryParameters);
+    for (var parameter in defaultQueryParameters) {
+        if (query.get(parameter)) {
+            result[parameter] = query.get(parameter);
+        }
+    }
+    return result;
+}
+var useQueryAndPagination = function (config) {
     var _a = config || {}, _b = _a.indexType, indexType = _b === void 0 ? types_1.IndexType.ZERO_BASED : _b, _c = _a.pageSize, pageSize = _c === void 0 ? 15 : _c;
-    var routerHistory = react_router_dom_1.useHistory();
-    var routerUrl = react_router_dom_1.useRouteMatch().url;
-    var routeQuery = react_router_dom_1.useLocation().search;
-    var params = react_1.useMemo(function () { return new URLSearchParams(routeQuery); }, [routeQuery]);
-    var search = react_1.useCallback(function (query) {
-        if (query === '') {
-            params.delete('search');
+    var routerHistory = (0, react_router_dom_1.useHistory)();
+    var routerUrl = (0, react_router_dom_1.useRouteMatch)().url;
+    var routeQuery = (0, react_router_dom_1.useLocation)().search;
+    var params = (0, react_1.useMemo)(function () { return new URLSearchParams(routeQuery); }, [routeQuery]);
+    var updateQuery = (0, react_1.useCallback)(function (queryParameters) {
+        for (var parameter in queryParameters) {
+            if ((config === null || config === void 0 ? void 0 : config.defaultQueryParameters) &&
+                config.defaultQueryParameters[parameter] ===
+                    queryParameters[parameter]) {
+                params.delete(parameter);
+            }
+            else {
+                params.set(parameter, queryParameters[parameter].toString());
+            }
         }
-        else {
-            params.set('search', query);
-        }
         params.delete('page');
@@ -29,4 +56,6 @@ params.delete('size');
     }, [routerHistory, params]);
-    var clear = react_1.useCallback(function () {
-        params.delete('search');
+    var clear = (0, react_1.useCallback)(function () {
+        for (var parameter in config === null || config === void 0 ? void 0 : config.defaultQueryParameters) {
+            params.delete(parameter);
+        }
         params.delete('page');
@@ -39,3 +68,3 @@ params.delete('size');
     }, [routerHistory, params]);
-    var setPage = react_1.useCallback(function (page) {
+    var setPage = (0, react_1.useCallback)(function (page) {
         params.set('page', page.toString());
@@ -48,7 +77,7 @@ routerHistory.push({
     return {
-        search: params.get('search') || '',
-        page: utils_1.convert(params.get('page'), indexType === types_1.IndexType.ZERO_BASED ? 0 : 1),
-        size: utils_1.convert(params.get('size'), pageSize),
+        queryParameters: extractCurrentQueryParameters(params, config === null || config === void 0 ? void 0 : config.defaultQueryParameters),
+        page: (0, utils_1.convert)(params.get('page'), indexType === types_1.IndexType.ZERO_BASED ? 0 : 1),
+        size: (0, utils_1.convert)(params.get('size'), pageSize),
         actions: {
-            search: search,
+            updateQuery: updateQuery,
             clear: clear,
@@ -59,3 +88,3 @@ setPage: setPage,
 };
-exports.useSearchAndPagination = useSearchAndPagination;
+exports.useQueryAndPagination = useQueryAndPagination;
 //# sourceMappingURL=reactRouterPagination.js.map

dist/types.d.ts

@@ -5,13 +5,15 @@ export declare enum IndexType {
 }
+export declare type QueryParameters = Record<string, string>;
 export declare type Config = {
     indexType?: IndexType;
     pageSize?: number;
+    defaultQueryParameters?: QueryParameters;
 };
 export declare type Actions = {
-    search: (query: string) => void;
+    updateQuery: (query: QueryParameters) => void;
     clear: () => void;
     setPage: (page: number) => void;
 };
-export declare type UseSearchAndPagination = {
-    search: string;
+export declare type UseQueryAndPagination = {
+    queryParameters: QueryParameters;
     page: number;
@@ -21,4 +23,4 @@ size: number;
 };
-export interface IUseSearchAndPagination {
-    (config?: Config): UseSearchAndPagination;
+export interface IUseQueryAndPagination {
+    (config?: Config): UseQueryAndPagination;
 }

package.json

 {
   "name": "@aboutbits/react-pagination",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Pagination hooks for React",
@@ -57,3 +57,3 @@ "sideEffects": false,
     "next": "^11.0.1",
-    "next-router-mock": "^0.1.4",
+    "next-router-mock": "^0.6.1",
     "prettier": "^2.2.1",
@@ -60,0 +60,0 @@ "react": "^17.0.2",

readme.md

 React Pagination
 =============
 
-This package includes pagination hooks for React. The hooks support saving the search and pagination values in local
+[![npm package](https://badge.fury.io/js/%40aboutbits%2Freact-pagination.svg)](https://badge.fury.io/js/%40aboutbits%2Freact-pagination)
+[![license](https://img.shields.io/github/license/aboutbits/react-pagination)](https://github.com/aboutbits/react-pagination/blob/main/license.md)
+
+This package includes pagination hooks for React. The hooks support saving the query and pagination values in local
 state or in the browser URL.
@@ -10,3 +13,3 @@
 - [Usage](#usage)
-    - [useSearchAndPagination](#usesearchandpagination)
+    - [useQueryAndPagination](#usequeryandpagination)
 - [Supported Implementations](#supported-implementations)
@@ -27,3 +30,3 @@ - [In Memory Pagination](#in-memory-pagination)
 
-Second, you can make use of the `useSearchAndPagination` hook. This package implements 3 versions of this hook:
+Second, you can make use of the `useQueryAndPagination` hook. This package implements 3 versions of this hook:
 
@@ -36,5 +39,5 @@ - [In Memory](#in-memory-pagination): Use this hook where you don't want to modify browser history. e.g. Dialogs
 
-### useSearchAndPagination
+### useQueryAndPagination
 
-This hook supports the combination of a search value and pagination and manages the state of the search value, and the
+This hook supports the combination of query parameters and pagination and manages the state of the query parameter values and the
 pagination values.
@@ -48,2 +51,3 @@
 |pageSize|number|15|Page size of the pagination.|
+|defaultQueryParameters/Record<string, string>|{}|It defines the default value for each query parameter. This is used to remove a query parameter from the URL and also to clear the query.
 
@@ -54,6 +58,6 @@ #### The hook returns the following object:
 |---|---|---|
-|search|string|value of your search parameter|
+|queryParameters|object|values of your query parameters|
 |page|number|value of the current page|
 |size|number|max elements in a single page|
-|actions|object|object with 3 functions: search, setPage, clear|
+|actions|object|object with 3 functions: updateQuery, setPage, clear|
 
@@ -63,3 +67,3 @@ #### Example usage with NextJS
 ```tsx
-import { useSearchAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'
+import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'
 
@@ -71,7 +75,7 @@ const users = [
 function UserList() {
-    const { page, size, search, actions } = useSearchAndPagination({pageSize: 2})
+    const { page, size, queryParameters, actions } = useQueryAndPagination({pageSize: 2})
 
     return (
         <div>
-            <input onChange={(value) => actions.search(value)}/>
+            <input onChange={(value) => actions.updateQuery({search: value})}/>
             <button onClick={() => actions.clear()}>Clear Input</button>
@@ -84,3 +88,3 @@ <select onSelect={(value) => actions.setPage(value)}>
             <ul>
-                {users.filter(user => user.startsWith(search))
+                {users.filter(user => user.startsWith(queryParameters.search))
                     .slice(page, page + size)
@@ -107,3 +111,3 @@ .map(user => <li>{user}</li>)}
 ```tsx
-import { useSearchAndPagination } from '@aboutbits/react-pagination/dist/inMemoryPagination'
+import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/inMemoryPagination'
 ```
@@ -116,3 +120,3 @@
 ```tsx
-import { useSearchAndPagination } from '@aboutbits/react-pagination/dist/reactRouterPagination'
+import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/reactRouterPagination'
 ```
@@ -126,3 +130,3 @@
 ```tsx
-import { useSearchAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'
+import { useQueryAndPagination } from '@aboutbits/react-pagination/dist/nextRouterPagination'
 ```
@@ -129,0 +133,0 @@

No alert changes

Improved metrics

Total package byte prevSize

37182

increased by31.1%

Lines of code

543

increased by31.48%

Number of lines in readme file

149

increased by2.76%

No dependency changes