Update readme

Author: mmalfertheiner

readme.md

@@ -1,18 +1,17 @@
 React Pagination
 =============
 
-This package includes pagination hooks for React. The hooks support saving the search and pagination values in local state or in the browser URL.
+This package includes pagination hooks for React. The hooks support saving the search and pagination values in local
+state or in the browser URL.
 
 ## Table of content
 
 - [Usage](#usage)
-  - [useSearch](#usesearch)
-  - [usePagination](#usepagination)
-  - [useSearchAndPagination](#usesearchandpagination)
-- [Supported Implementations](#supported-implementations)  
-  - [In Memory Pagination](#in-memory-pagination)
-  - [React-Router based pagination](#router-based-pagination)
-  - [NextJS Router based pagination](#nextjs-router-based-pagination)
+    - [useSearchAndPagination](#usesearchandpagination)
+- [Supported Implementations](#supported-implementations)
+    - [In Memory Pagination](#in-memory-pagination)
+    - [React-Router based pagination](#react-router-based-pagination)
+    - [NextJS Router based pagination](#nextjs-router-based-pagination)
 - [Build & Publish](#build--publish)
 - [Information](#information)
 
@@ -24,120 +23,68 @@ First, you have to install the package:
 npm install @aboutbits/react-pagination
 ```
 
-Second, you can make use of the different hooks.
+Second, you can make use of the `useSearchAndPagination` hook. This package implements 3 versions of this hook:
 
-- [useSearch](#usesearch)
-- [usePagination](#usepagination)
-- [useSearchAndPagination](#usesearchandpagination)
+- [In Memory](#in-memory-pagination): Use this hook where you don't want to modify browser history. e.g. Dialogs
+- [React Router](#react-router-based-pagination): Use this hook if you want to keep track of the state in the URL and
+  your project is using React Router.
+- [NextJS Router](#nextjs-router-based-pagination): Use this hook if you want to keep track of the state in the URL and
+  your project is using NextJS.
 
-### useSearch
-
-This hook saves the value of your search input and lets you change it or clear it.
+### useSearchAndPagination
 
-```tsx
+This hook supports the combination of a search value and pagination and manages the state of the search value, and the
+pagination values.
 
-import { useSearch } from '@aboutbits/react-pagination/nextRouterPagination'
+The hook returns the following object:
 
-const users = [
-    'Alex', 'Nadia', 'Natan', 'Marie', 'Moritz'
-]
-
-function UserList() {
-    const { search, searchActions } = useSearch()
-  
-    return (
-        <div>
-          <input onChange={searchActions.search} />
-          
-          <ul>
-          {users
-                  .filter(user => user.startsWith(search))
-                  .map(user => <li>{user}</li>)}
-          </ul>
-        </div>
-    )
-}
-```
-
-### usePagination
-
-This hook saves the value of your current page and lets you change it or clear it.
+|value|type|description|
+|---|---|---|
+|search|string|value of your search parameter|
+|page|number|value of the current page|
+|size|number|max elements in a single page|
+|actions|object|object with 3 functions: search, setPage, clear|
 
 ```tsx
-
-import { usePagination } from '@aboutbits/react-pagination/nextRouterPagination"
+import { useSearchAndPagination } from '@aboutbits/react-pagination/nextRouterPagination'
 
 const users = [
-  ['Alex', 'Nadia'], 
-  ['Natan', 'Marie'], 
-  ['Moritz', 'Franz']
+    'Alex', 'Simon', 'Natan', 'Nadia', 'Moritz', 'Marie'
 ]
 
 function UserList() {
-    const { page, size, paginationActions } = usePagination()
-  
+    const { page, size, search, actions } = useSearchAndPagination()
+
     return (
         <div>
-          <select onSelect={paginationActions.setPage}>
-            <option value={0}>First Page</option>
-            <option value={1}>Second Page</option>
-            <option value={2}>Third Page</option>
-          </select>
-          
-          <ul>
-          {users[page]
-                  .map(user => <li>{user}</li>)}
-          </ul>
-        </div>
-    )
-}
-```
-
-### useSearchAndPagination
-
-This hook supports the combination of a search value and pagination.
-The `clear` function clears the search value and resets the page to the first page.
-
-```tsx
-import { useSearchAndPagination } from '@aboutbits/react-pagination/nextRouterPagination'
-
-const users = [
-  'Alex', 'Simon', 'Natan', 'Nadia', 'Moritz', 'Marie'
-]
-
-function UserList() {
-  const { page, size, search, searchActions, paginationActions } = useSearchAndPagination()
-
-  return (
-          <div>
-            <input onChange={searchActions.search} />
-            <button onClick={searchActions.clear}>Clear Input</button>
-            <select onSelect={paginationActions.setPage}>
-              <option value={0}>First Page</option>
-              <option value={1}>Second Page</option>
+            <input onChange={(value) => actions.search(value)}/>
+            <button onClick={() => actions.clear()}>Clear Input</button>
+            <select onSelect={(value) => actions.setPage(value)}>
+                <option value={0}>First Page</option>
+                <option value={1}>Second Page</option>
             </select>
-            
+
             <ul>
-              {users.filter(user => user.startsWith(search))
-                      .slice(page, page + size)
-                      .map(user => <li>{user}</li>)}
+                {users.filter(user => user.startsWith(search))
+                    .slice(page, page + size)
+                    .map(user => <li>{user}</li>)}
             </ul>
-          </div>
-  )
+        </div>
+    )
 }
 ```
 
 ## Supported implementations
 
-This package includes 3 different implementations of the above hooks.
+This package includes 3 different implementations of the above hook.
+
 - [In Memory](#in-memory-pagination)
 - [React Router](#react-router-based-pagination)
 - [NextJS Router](#nextjs-router-based-pagination)
 
 ### In Memory Pagination
 
-Use this pagination hook if you want to keep track of the pagination in memory. 
-This is very handy for dialogs.
+Use this pagination hook if you want to keep track of the pagination in memory. This is very handy for dialogs.
 
 ```tsx
 import { useSearchAndPagination } from '@aboutbits/react-pagination/inMemoryPagination'
@@ -153,7 +100,8 @@ import { useSearchAndPagination } from '@aboutbits/react-pagination/reactRouterP
 
 ### NextJS Router based pagination
 
-These are specific hooks for applications that use [NextJS Router](https://nextjs.org/docs/api-reference/next/router) for routing.
+These are specific hooks for applications that use [NextJS Router](https://nextjs.org/docs/api-reference/next/router)
+for routing.
 
 ```tsx
 import { useSearchAndPagination } from '@aboutbits/react-pagination/nextRouterPagination'
@@ -171,16 +119,15 @@ npm version major
 
 ## Information
 
-About Bits is a company based in South Tyrol, Italy. You can find more information about us on [our website](https://aboutbits.it).
+About Bits is a company based in South Tyrol, Italy. You can find more information about us
+on [our website](https://aboutbits.it).
 
 ### Support
 
 For support, please contact [info@aboutbits.it](mailto:info@aboutbits.it).
 
 ### Credits
 
-- [Martin Malfertheiner](https://github.com/mmalfertheiner)
-- [Alex Lanz](https://github.com/alexlanz)
 - [All Contributors](../../contributors)
 
 ### License