react-mui-pagination

1.1.0 • Public • Published

React Material UI Pagination

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

Jun-14-2019 12-48-42

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 image

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>}

Package Sidebar

Install

npm i react-mui-pagination

Weekly Downloads

31

Version

1.1.0

License

MIT

Unpacked Size

25.4 kB

Total Files

4

Last publish

Collaborators

  • bnabriss