React material UI pagination is a react library that depends on MATERIAL-UI framework.
- 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
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.
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.
You have many options to customize links to different views
<Pagination numOfLinks={3} page={page} setPage={setPage} total={424} />
// or you can even hide them
<Pagination numOfLinks={0} page={page} setPage={setPage} total={424} /><Pagination hidePrevNext hideFirstLast
page={page} setPage={setPage} total={424} /><Pagination
linksShadow={4}
linksColor='secondary'
activeLinkColor='default'
page={page} setPage={setPage} total={424} /><Pagination
LinksComponent='a'
linksProps={{ href: '#page-' + page }}
activeProps={{ style: { fontWeight: 'bold' } }}
page={page} setPage={setPage} total={424} />// 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} />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>} |