@boomslag/react-pagination

A simple and versatile pagination component for React.

Installation

npm install @boomslag/react-pagination

Or if you're using Yarn:

yarn add @boomslag/react-pagination

Usage

Here's a basic example of how to use the StandardPagination component:

import React, { useState } from 'react';
import StandardPagination from '@boomslag/react-pagination';

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

    return (
        <StandardPagination 
            data={...}  // your data array
            count={...} // total number of items
            pageSize={10} // number of items per page
            currentPage={currentPage} 
            setCurrentPage={setCurrentPage} 
        />
    );
}

export default MyComponent;

Props

• data (Array): The array of data items to paginate.
• count (Number): The total number of items.
• pageSize (Number): The number of items per page.
• currentPage (Number): The current active page.
• setCurrentPage (Function): A function to set the current page.

Styling

This component uses Tailwind CSS for styling. If your project doesn't use Tailwind CSS, you might need to adjust the styling or include the necessary classes.

Contributing

If you have suggestions, bug reports, or enhancements, feel free to submit a pull request or issue on GitHub.

License

MIT

© 2023 boomslag