react-mui-pagination v1.1.0

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: