React Material UI Pagination

React material UI pagination is a react library that depends on MATERIAL-UI framework.

Features

• Supports rtl, you need to enable rtl for your theme, check material-ui documentation about this point
• Customizable, since you can change styling, content, used components and number of visible links

Requirements

This library depends on both react version ^16.8.6 and material-ui 4.0.0, so please make sure that you have these minimum requirements before you install it.

Installation

npm i react-mui-pagination

Then import it where you need to use it

import Pagination from 'react-mui-pagination';

Then add your first component

const [page, setMyPage] = React.useState(1); // this an example using hooks
const setPage = (e, p) => {
  setMyPage(p);
}
return (
    <Pagination page={page} setPage={setPage} total={100} />
);

Here you are, your component is ready to use.

Customization

You have many options to customize links to different views

Set number of visible links

<Pagination numOfLinks={3} page={page} setPage={setPage} total={424} />
// or you can even hide them 
<Pagination numOfLinks={0} page={page} setPage={setPage} total={424} />

Hide previous/next buttons or first/last buttons

<Pagination hidePrevNext hideFirstLast 
page={page} setPage={setPage} total={424}   />

Use other material-ui styles

<Pagination
  linksShadow={4}
  linksColor='secondary'
  activeLinkColor='default'
  page={page} setPage={setPage} total={424} />

Use custom components/elements

<Pagination
  LinksComponent='a'
  linksProps={{ href: '#page-' + page }}
  activeProps={{ style: { fontWeight: 'bold' } }}
  page={page} setPage={setPage} total={424} />

Use custom content for buttons

// import this from material-ui
import Fab from '@material-ui/core/Fab';
// ...
<Pagination
  firstLastShadow={6}
  firstLastColor={'secondary'}
  FirstLastComponent={Fab} // we have used our imported component
  firstContent='FST'
  lastContent='LST'
  page={page} setPage={setPage} total={424} />

Reference

You can pass many properties to the component:

| Name | Type | Default | Description | |--------------------|-----------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | total * | int | | The number of total results | | page | int | 1 | The current active page | | setPage | function | | to change the page state | | perPage | int | 10 | How many results each page can has | | numOfLinks | int | 5 | How many links to be visible | | hidePrevNext | boolean | false | If true previous and next buttons will be hidden | | hideFirstLast | boolean | false | If true first and last buttons will be hidden | | linksShadow | int | 0 | The pages' links' shadow | | linksColor | enum: 'default' , 'primary' , 'secondary', 'error' | 'default' | The pages' links color, these colors are depending on material-ui colors for Fab component since you have left the property LinksComponent to its default value | | activeLinkColor | enum: 'default' , 'primary' , 'secondary', 'error' | 'primary' | The active pages link color, this color are depending on material-ui colors for Fab component since you have left the property LinksComponent to its default value | | LinksComponent | elementType | Fab | The component used for the links' node. Either a string to use a DOM element or a component. | | linksProps | object | {} | Attributes to be applied to links components. | | activeProps | object | {} | Attributes to be applied to active link component. | | prevNextShadow | int | 0 | The previous and next links' shadow | | prevNextColor | enum: 'default' , 'primary' , 'secondary', 'errorÎ' | 'default' | The previous and next links colors, these colors are depending on material-ui colors for IconButton component since you have left the property PrevNextComponent to its default value | | PrevNextComponent | elementType | IconButton | The component used for the previous and next links' node. Either a string to use a DOM element or a component. | | prevNextProps | object | {} | Attributes to be applied to previous and next links components. | | nextProps | object | {} | Attributes to be applied to next link component. | | prevProps | object | {} | Attributes to be applied to previous link component. | | prevContent | string | elementType | KeyboardArrowLeft|The content of previous link, note that this default content depends on theme dircetion, so it will be automaticlly set to KeyboardArrowRight in rtl. to set html elements you cannot use the tag name directly so instead of writing 'b' you should write {<b>some text</b>} | | nextContent | string | elementType | KeyboardArrowRight|The content of next link, note that this default content depends on theme dircetion, so it will be automaticlly set to KeyboardArrowLeft in rtl. . to set html elements you cannot use the tag name directly so instead of writing 'b' you should write {<b>some text</b>} | | firstLastShadow | int | 0 | The first and last links' shadow | | firstLastColor | enum: 'default' , 'primary' , 'secondary', 'errorÎ' | 'default' | The first and last liks colors, these colors are depending on material-ui colors for IconButton component since you have left the property FirstLastComponent to its default value | | FirstLastComponent | elementType | IconButton | The component used for the first and last links' node. Either a string to use a DOM element or a component. | | firstLastProps | object | {} | Attributes to be applied to first and last links' components. | | firstProps | object | {} | Attributes to be applied to first link component. | | lastProps | object | {} | Attributes to be applied to last link component. | | firstContent | string | elementType | FirstPageIcon|The content of previous link, note that this default content depends on theme dircetion. to set html elements you cannot use the tag name directly so instead of writing 'b' you should write {<b>some text</b>} | | lastContent | string | elementType | LastPageIcon|The content of next link, note that this default content depends on theme dircetion. . to set html elements you cannot use the tag name directly so instead of writing 'b' you should write {<b>some text</b>} |