@wpmudev/react-pagination

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

Prop Name	Type	Description
limit	Integer	Enter the elements limit per page.
results	Boolean	Shows results section if true.
skip	Boolean	Shows skip arrow buttons if true.
pagesToBottom	Boolean	Pages will be rendered at bottom if true
skipToFirstLabel	String	String to be passed which will act as a label for skip to first button
previousLabel	String	String to be passed which will act as a label for next page button
nextLabel	String	String to be passed which will act as a label for previous page button
skipToLastLabel	String	String to be passed which will act as a label for skip to last button
child	Array	Pass an array here to render as elements.
paginationContent	component	Pass a component here to be rendered custom.