Yet another Paginator in React.js
Many times developers struggle with enabling pagination when a list is too long to fit on a view port. They also look for options so that data can be brought from the backend when the relevant page is loaded instead of prefetching everything at the beginning. The paginator should be a customisable and flexible component in the sense that it can be just plugged in the application.
In an aim to build simple, and reusable code components and solve the common design dilemmas we bring you a responsive and styleable paginator in React.js which can be customised according to project requirements. Browse through the pages by clicking on individual page numbers, click on the “Next” & “Previous” button.
Properties
It is a single component repository containing the paginator and its functions as described below.
Prerequisites
- NodeJS and NPM: NodeJS is the platform needed for the ReactJS development. (https://nodejs.org/en/)
- After successfully installing NodeJS, we can start installing React upon it using npm. You can install ReactJS in two ways
- Using webpack and babel.
- Using the create-react-app command.
3. Integrated Development Environment — IDE eg. VScode
Installation
To get started, clone the following github repository:
git clone https://github.com/Eyezon/react-paginator.gitOnce the repository is cloned, open the project in an IDE and from the terminal execute the following command to install the project dependencies.
npm installTo start the paginator please execute the following command. A browser window will open with the paginator.
npm start“An interface is humane if it is responsive to human needs and considerate of human frailties.” — Jef Raskin, American Human-computer interaction interface expert and pioneer of the Apple Macintosh computer
Pagination is an important design element. Whether we talk about desktop, mobile or web based systems, pagination is needed to navigate content that is displayed on multiple pages. The days of developing applications without paying heed to the end user experience have gone. What awaits us is how we are able to customise this simple concept and make it more relevant and friendly for the end users.
