A customizable pagination component for React applications. Tailor the look and feel using custom styles, control page navigation with intuitive icons, and easily manage page changes with a straightforward callback function.
npm install @munawiki/react-pagination
# or
yarn add @munawiki/react-pagination
Import the Pagination
component and CSS module into your React component file, then include the Pagination
component in your JSX, providing the necessary props for your use case.
import Pagination from "@munawiki/react-pagination";
import "@munawiki/react-pagination/dist/main.css";
function App() {
const handlePageChange = (page) => {
console.log("Current Page:", page);
};
return (
<Pagination
currentPage={1}
totalCount={50}
onPageChange={handlePageChange}
/>
);
}
export default App;
currentPage
: (required) Current active page number.totalCount
: (required) Total number of items.perPage
: Items per page (default: 10).prevIcon
: JSX for the Previous page icon (default: "<").nextIcon
: JSX for the Next page icon (default: ">").customStyles
: Object for overriding default CSS styles.onPageChange
: Callback function for page changes.
Clone the repository from GitHub, install the dependencies, and start the development server.
git clone https://github.com/munawiki/react-pagination.git
cd react-pagination
npm install
npm run dev
dev
: Start the development server using Vite.build
: Build the component for production.lint
: Lint the project files.preview
: Preview the build.
- Peer Dependencies:
react
^18.2.0,react-dom
^18.2.0. - Dev Dependencies: Check
package.json
for development dependencies.