@wpmudev/react-pagination v1.1.6

React Pagination

React Pagination allows you include to paginate your long-list items on your project.

npm i @wpmudev/react-pagination --save-dev

Usage

Javascript Instantiation

import React from "react";

import { Pagination } from "@wpmudev/react-pagination";

const MyApp = () => {

	//This is a prop that has to be passed to Pagination if we want a custom pagination.
	const paginationContent = ({ ...properties }) => { 
	/*You might wonder why *properties* instead of props. It is to make sure that the props which you might already be using in your component or file does not effect the ones that we want to use for the pagination.
	For that reason, it is highly recommended to use properties and append any other props that you might want to use inside the paginationContent.
	properties have all the required values for pagination.*/
		return (
			<>
				{PaginationNav({ ...properties })}
				{PaginationResults({ ...properties })}
				<div>Belllaaaa</div>
			</>
		);
	};

	return (
		<Pagination
			limit={5}
			results={true}
			skip={true}
			pagesToBottom={false} //This does not make any difference when using *paginationContent*.
			skipToFirstLabel=""
			previousLabel=""
			nextLabel=""
			skipToLastLabel=""
			child={childrenArray}
			paginationContent
		>
			<div>Element 1 could be here</div>
			<div>Element 2 could be here</div>
			<div>Element 3 could be here</div>
		</Pagination>
	);
};

Props