![](\"https://i.imgflip.com/2nvebz.gif\" "\\"made")
\n\n## Installation\n1. Install paginatable-list\n`yarn add @twotalltotems/paginatable-list` or `npm install @twotalltotems/paginatable-list --save` \n2. Install dependencies\n`yarn add redux && yarn add react-redux && yarn add redux-thunk && yarn add reduxsauce && yarn add axios && yarn add prop-types` or `npm install redux && npm install react-redux && npm install redux-thunk && npm install reduxsauce && npm install axios && npm install prop-types`\n\n\n## Dependencies\n\nThis project needs the follow dependencies inside your project.\n\n1. `redux`\n1. `react-redux`\n1. `reduxsauce`\n2. `redux-thunk`\n1. `prop-types`\n1. `axios`\n\n\n## Basic Usage\n\n#### Initialize PaginationStateManager Instance\n\nIn order to use `PaginatableList`, first create a `PaginationStateManager` instance. There are two required parameters:\n\n\n```\nimport { PaginationStateManager } from '@twotalltotems/paginatable-list';\n\nconst BASE_URL = 'http://myapi.endpoint';\n\nconst onParseResponseData = (data) => {\n // From the response, an array of items and total pages value are required to setup the manager\n const { results, totalPages } = data\n return {\n items: results,\n\ttotalPagesNumber: totalPages\n }\n}\n\nconst paginationStateManager = new PaginationStateManager('users', `${BASE_URL}/users`, onParseResponseData);\n\n```\n\n| Parameter | Description |\n|-------------| -------------|\n| name |Redux store key that will be used to store list items. In this example, `users` is the key that will be used to store the item list in the Redux store. |\n| endpointUrl | The paginatable endpoint URL for requesting content for each page with pageNumber and pageSize. In this example, `${BASE_URL}/users` is the endpointUrl. |\n| onParsePaginationResponse | Depends on the different structure of the API response, this method is required to parse list item out of the whole response data. This method needs to return a javascript object that contains key `items` which holds the array of items in the list. |\n| customizedReducerPath | Optional. This paramter is required unless you'd like to embed pagination reducer into another reduer. Please refer Customization section for more details.|\n| requestHeaders | Optional. Pass in this paramter if the pagination server needs HTTP headers. This parameter requires a Promise.|\n\n#### Link Redux Store\n\n```\nimport { combineReducers, applyMiddleware, compose, createStore } from 'redux';\nimport ReduxThunk from 'redux-thunk';\n\nconst getCombinedReducers = () => {\n return combineReducers({\n users : paginationStateManager.reducer(), // 'users' should be kept the same as the first param in PaginationStateManager instance created in the last step.\n });\n}\n\nconst reduxStore = createStore(\n\tgetCombinedReducers(),\n\t{}, //Initial State of Redux Store\n\tcompose(\n\t\tapplyMiddleware(ReduxThunk)\n\t)\n)\n```\n*Notice: The key used in `combineReducers` need to be consistant with the key that is used to initialize `PaginationStateManager` in the last step, which in this example, is `users`.*\n\n#### Use PaginatableList Component\n\nInside your component, you can use this code. Don't forget to import PaginatableList at the top of the component first.\n\n```\nimport PaginatableList from '@twotalltotems/paginatable-list';\n\n```\n\n```\nrender() {\n return (\n | \n \n | \n\n \t![](\"https://avatars3.githubusercontent.com/u/440097?s=460&v=4\") \n \t\n \tFelipe Peña \n | \n \n \t![](\"https://avatars3.githubusercontent.com/u/3868329?s=460&v=4\") \n \t\n \tVinson Li \n | \n \n \t![](\"https://avatars1.githubusercontent.com/u/1243479?s=400&v=4\") \n \t\n \tAnson Yao \n | \n \n \t![](\"https://avatars3.githubusercontent.com/u/22039602?s=400&v=4\") \n \t\n \tGokul Kumar \n | \n \n \t![](\"https://avatars0.githubusercontent.com/u/15810133?s=400&v=4\") \n \t\n \tFelix Cheng \n | \n \n \t![](\"https://avatars3.githubusercontent.com/u/10748192?s=460&v=4\") \n \t\n \tMitchell Ganton \n | \n \n \t![](\"https://avatars0.githubusercontent.com/u/36147173?s=460&v=4\") \n \t\n \tGordan Zhang \n | \n
|---|
![](\"https://ttt.studio/wp-content/themes/tttwordpresstheme/imgs/ttt-colour.png\")
\n\t![](\"https://avatars3.githubusercontent.com/u/16603120?s=460&v=4\")
\n \t