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; // this an example using hooksconst setPage = e p ;return <Pagination = = = />;
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 = = = = />// or you can even hide them <Pagination = = = = />
Hide previous/next buttons or first/last buttons
<Pagination = = = />
Use other material-ui styles
<Pagination = ='secondary' ='default' = = = />
Use custom components/elements
<Pagination ='a' = = = = = />
Use custom content for buttons
// import this from material-uiimport Fab from '@material-ui/core/Fab';// ...<Pagination = = = // ='FST' ='LST' = = = />
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>} |