Unlock the Power of Pagination: Boosting UX and Rankings

Setting Up the Project

To get started, set up a new React project on your local machine by running the following command:

npx create-react-app my-app

Next, install Tailwind CSS and other dependencies, including Create React App (CRA) and CRACO, a configuration layer for CRA. This will allow you to override the PostCSS configuration.

Configuring Tailwind CSS

Create a new file called craco.config.js and add Tailwind CSS and autoprefixer as PostCSS plugins:

module.exports = {
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')],
    },
  },
};

Then, create a tailwind.config.js file and add the necessary code to your default index.css file.

Structuring the Pagination Component

Our project will follow a specific structure, with separate files for handling and displaying the pagination component. Let’s take a closer look at some of these files and folders.

Pagination Using Navigation Buttons

The first type of pagination component we’ll create uses Next and Previous buttons to navigate through the data on a webpage. Our App.js file will render the current page information, and the Tailwind CSS utility classes will remove the need for external CSS.

import React, { useState } from 'eact';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const postsPerPage = 10;
  const indexOfFirstPost = (currentPage - 1) * postsPerPage;
  const indexOfLastPost = indexOfFirstPost + postsPerPage;
  const currentPosts = data.slice(indexOfFirstPost, indexOfLastPost);

  const paginateFront = () => {
    setCurrentPage(currentPage + 1);
  };

  const paginateBack = () => {
    setCurrentPage(currentPage - 1);
  };

  return (

  );
}

export default App;

Pagination Using a Numbered List

The second pagination component we’ll build uses a numbered list for navigation instead of Next and Previous buttons. We’ll update our App.js file and the props sent to the pagination component.

import React, { useState } from 'eact';

function App() {
  const [currentPage, setCurrentPage] = useState(1);
  const postsPerPage = 10;
  const numberOfPages = Math.ceil(data.length / postsPerPage);
  const pageNumbers = Array(numberOfPages).fill(0).map((_, index) => index + 1);

  const handleClick = (pageNumber) => {
    setCurrentPage(pageNumber);
  };

  return (

  );
}

export default App;

Highlighting the Active Page

To highlight the active page, we’ll set different Tailwind CSS classes based on a check. If the pageNumber is equal to the currentPage, we’ll differentiate it from the other tags by giving it a red border and font color.

.border-red-500 {
  border-color: #red;
}

.text-red-500 {
  color: #red;
}