DEV Community 👩‍💻👨‍💻

Cover image for How To Make Pagination In React Without Using Npm Package?
Musa Yazlık
Musa Yazlık

Posted on

How To Make Pagination In React Without Using Npm Package?

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. 😄😄

How To Make Pagination In React Without Using Npm Package Musa Yazlık

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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,
    });
Enter fullscreen mode Exit fullscreen mode
  • 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));
    }, []);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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 });
    };
Enter fullscreen mode Exit fullscreen mode

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 });
        }
    };
Enter fullscreen mode Exit fullscreen mode

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 });
        }
    };
Enter fullscreen mode Exit fullscreen mode

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.

You can visit my website for more.

Top comments (0)

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!