Hello everyone. In this article, I will be explaining how you can make pagination in your React projects using only Javascript and React Hooks without using an npm package like “react-paginate“. Let’s get started. 😄😄
When you search for pagination with React in Google, you will see many resources, but when you enter the resources, you will see that pagination is usually done using an npm package. But in this article, I will be telling you how you can pagination without using an additional npm package.
What is npm?
Before starting pagination, let’s take a look at what npm is. Npm is a package management system developed for the Javascript programming language and accepted as a standard by Node.js . In this package system, there are packages that meet all kinds of software needs.
Likewise, there are packages such as react-paginate, react-js-pagination and react-responsive-pagination that meet your pagination needs in your (https://en.musayazlik.com/category/software/javascript/react/) projects. We will be paginating without using these packages.
Preliminary Preparation of the Structure
Let’s first create a react project with the following command.
npx create-react-app react-pagination
Then we will do a little cleanup only in App.js and App.css files. App.js file will be as follows. You can delete all css codes in the App.css file.
import './App.css'
function App() {
return (
<div className='App'>
</div>
)
}
export default App
Now we have created our project and structure without pagination coding. After that, we will now start making pagination.
Pagination without Npm Package
Before we start, we will be using “https://jsonplaceholder.typicode.com/posts” as the API source. From here we will receive 100 post data. Depending on the number we want, we will show the posts. At the same time, depending on it, the number of pagination pages will be created. Now let’s create the statuses.
Creation of Statements
We will create two states here. One will keep the data coming from our API as an array. The other will hold the pagination values. Pagination state will hold currentPage and dataShowLenght values as an object.
const [data, setData] = useState([]);
const [pagination, setPagination] = useState({
currentPage: 1,
dataShowLenght: 3,
});
- currentPage : Will specify the current pagination page.
- dataShowLenght : It will specify the number of posts to be shown on the page.
Data Retrieval from Api
With the following coding, we received posts data from “https://jsonplaceholder.typicode.com/posts” and transferred it to the data state.
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/posts")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
Determining the Total Number of Pages
There is a simple formula to determine the number of pagination pages that will occur. When we divide the number of data by the number of data to be displayed, we find the number of pages that will occur. If the resulting value is a decimal number, we need to round this number to the next higher number.
The logic here is to get the correct totalPage number that will show all the data. We add the remaining values to the last page.
For example, when there are 10 content, when we want to show them as three, we will have 1 left and we will show it alone on the next page. In this way, 4 pagination pages are created for 10 content. We will be using the Math.ceil() method for this. This method rounds the decimal number to the next higher number. If the result is 3.11, it will round to 4. The first 3 pages will show 3 data and the last page will show 1 data.
const totalPage = Math.ceil(data.length / pagination.dataShowLenght);
Above, we divided the number of data by the number of dataShowLenght to be displayed, rounded it to the next higher number if it is decimal with the Math.ceil() method and assigned it to the totalPage variable.
Functions to Run When Clicking Pagination Buttons
Here we will be looking at the functions prepared for the functionality of the pagination buttons to be created. We will create 3 functions, Numbers, Next and Prev.
Function that changes CurrentPage when pressing numbers
In the function below, the currenPage value is replaced with the incoming page value. dataShowLenght value remains the same.
const paginationPage = (page) => {
setPagination({ ...pagination, currentPage: page });
};
Function Providing CurrentPage Change When Next Button is Pressed
In the function below, the currenPage value increases the currentPage value by one. In the if query, if the pagination.currentPage value is less than the totalPage value, it will increase the currentPage value by 1 each time. But if it is equal or greater, it will assign the totalPage value to the currentPage value.
What we want to do here is to make the next button non-functional when the last pagination page is reached. dataShowLenght value will remain the same.
const paginationNext = () => {
if (pagination.currentPage < totalPage) {
setPagination({ ...pagination, currentPage: pagination.currentPage + 1 });
} else {
setPagination({ ...pagination, currentPage: totalPage });
}
};
Function Providing CurrentPage Change When Prev Button is Pressed
In the function below, the currenPage value reduces the currentPage value by one. In the if else query, if the pagination.currentPage value is greater than 1, it will decrease the currentPage value by 1 each time.
But if it is equal or less, it will assign a value of 1 to the currentPage value. What we want to do here is to make the prev button non-functional when the first pagination page is reached. dataShowLenght value will remain the same.
const paginationPrev = () => {
if (pagination.currentPage > 1) {
setPagination({ ...pagination, currentPage: pagination.currentPage - 1 });
} else {
setPagination({ ...pagination, currentPage: 1 });
}
};
Since the above 3 functions change the pagination state value, it will cause the component to render again. Now let’s look at the code in return and try to understand it.
Return Field Codes
The following codes contain all the codes in the return field in the component.
Top comments (0)