@bolttech/molecules-pagination

Pagination Component

The Pagination component is a customizable React component that provides navigation between different pages of content.

Installation

To use the Pagination component, you need to install the required dependencies:

npm install @bolttech/frontend-foundations @bolttech/molecules-pagination

or

yarn add @bolttech/frontend-foundations @bolttech/molecules-pagination

Usage

You can utilize the Pagination component by importing it and including it in your JSX. Here's an example:

import React, {useState} from 'react';
import {Pagination} from '@bolttech/molecules-pagination';
import {bolttechTheme, BolttechThemeProvider} from "@bolttech/frontend-foundations"; // Adjust the path to your component

function App() {
  const [currentPage, setCurrentPage] = useState(1);

  const handlePageChange = (newPage) => {
    setCurrentPage(newPage);
  };

  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      {/* Content */}
      {/* Pagination component */}
      <Pagination
        current={currentPage}
        pages={10}
        onChange={handlePageChange}
        texts={{
          previous: 'Previous',
          next: 'Next',
          current: 'Page $current of $pages',
        }}
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The Pagination component accepts the following props:

Prop	Type	Description
current	number	The current active page number.
dataTestId	string	The data-testid attribute for testing purposes.
id	string	The ID attribute for the component.
onChange	function	Callback function triggered when page changes.
pages	number	The total number of pages.
texts	object	Object containing text labels for the pagination.

The texts prop is an object with the following properties:

• previous: Text for the previous page button.
• next: Text for the next page button.
• current: Text for displaying the current page and total pages. You can use $current and $pages placeholders in the text, which will be replaced with the actual values.

Functionality

The Pagination component provides the following functionality:

• Navigation: Renders navigation buttons for the previous and next pages.
• Page Selection: Displays a dropdown allowing the user to select a specific page.
• Text Customization: Allows customization of the text labels and placeholders.
• Disabled Buttons: Disables the previous button on the first page and the next button on the last page.

Contribution

Contributions to the Pagination component are welcomed. If you encounter issues or have suggestions for improvements, feel free to open an issue or submit a pull request on the component's Bitbucket repository.