Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bnabriss/react-mui-pagination

React Material UI Pagination
https://github.com/bnabriss/react-mui-pagination

Last synced: 2 days ago
JSON representation

React Material UI Pagination

Host: GitHub
URL: https://github.com/bnabriss/react-mui-pagination
Owner: bnabriss
License: mit
Created: 2019-06-13T02:39:56.000Z (over 5 years ago)
Default Branch: master
Last Pushed: 2019-06-14T10:10:00.000Z (over 5 years ago)
Last Synced: 2024-10-05T04:14:19.570Z (about 1 month ago)
Language: JavaScript
Size: 146 KB
Stars: 2
Watchers: 0
Forks: 3
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# React Material UI Pagination
React material UI pagination is a react library that depends on [MATERIAL-UI](https://material-ui.com) framework.

![Jun-14-2019 12-48-42](https://user-images.githubusercontent.com/19927903/59500780-d15eae00-8ea2-11e9-8427-2f5e0d03e6df.gif)

## Features
* Supports `rtl`, you need to enable rtl for your theme, check material-ui [documentation](https://material-ui.com/guides/right-to-left/) 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
```jsx
import Pagination from 'react-mui-pagination';
```
Then add your first component
```jsx
const [page, setMyPage] = React.useState(1); // this an example using hooks
const setPage = (e, p) => {
setMyPage(p);
}
return (

);
```
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
```jsx

// or you can even hide them

```
#### Hide previous/next buttons or first/last buttons
```jsx

```

#### Use other material-ui styles
```jsx

```
#### Use custom components/elements
```jsx

```
#### Use custom content for buttons
```jsx
// import this from material-ui
import Fab from '@material-ui/core/Fab';
// ...

```

### Reference
You can pass many properties to the component:

| Name
|---------------
| `total` *
| `page`
| `setPage`
| `perPage`
| `numOfLinks`
| `hidePrevNext`
| `hideFirstLast`
| `linksShadow`
| `linksColor`
| `activeLinkColor`
| `LinksComponent`
| `linksProps`
| `activeProps`
| `prevNextShadow`
| `prevNextColor`
| `PrevNextComponent`
| `prevNextProps`
| `nextProps`
| `prevProps`
| `prevContent`
| `nextContent`
| `firstLastShadow`
| `firstLastColor`
| `FirstLastComponent`
| `firstLastProps`
| `firstProps`
| `lastProps`
| `firstContent`
| `lastContent` | Type | Default | Description | -----|-----------------------------------------------------|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | int | | The number of total results | | int | 1 | The current active page | | function | | to change the page state | | int | 10 | How many results each page can has | | int | 5 | How many links to be visible | | boolean | false | If `true` previous and next buttons will be hidden | | boolean | false | If `true` first and last buttons will be hidden | | int | 0 | The pages' links' shadow | | enum: 'default' , 'primary' , 'secondary', 'error' | 'default' | The pages' links color, these colors are depending on material-ui colors for [`Fab`](https://material-ui.com/api/fab/) component since you have left the property `LinksComponent` to its default value | | enum: 'default' , 'primary' , 'secondary', 'error' | 'primary' | The active pages link color, this color are depending on material-ui colors for [`Fab`](https://material-ui.com/api/fab/) component since you have left the property `LinksComponent` to its default value | | elementType | Fab | The component used for the links' node. Either a string to use a DOM element or a component. | | object | {} | Attributes to be applied to links components. | | object | {} | Attributes to be applied to active link component. | | int | 0 | The previous and next links' shadow | | enum: 'default' , 'primary' , 'secondary', 'errorÎ' | 'default' | The previous and next links colors, these colors are depending on material-ui colors for [`IconButton`](https://material-ui.com/api/icon-button/) component since you have left the property `PrevNextComponent` to its default value | | elementType | IconButton | The component used for the previous and next links' node. Either a string to use a DOM element or a component. | | object | {} | Attributes to be applied to previous and next links components. | | object | {} | Attributes to be applied to next link component. | | object | {} | Attributes to be applied to previous link component. | | 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 `{some text}` | | 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 `{some text}` | | int | 0 | The first and last links' shadow | | enum: 'default' , 'primary' , 'secondary', 'errorÎ' | 'default' | The first and last liks colors, these colors are depending on material-ui colors for [`IconButton`](https://material-ui.com/api/icon-button/) component since you have left the property `FirstLastComponent` to its default value | | elementType | IconButton | The component used for the first and last links' node. Either a string to use a DOM element or a component. | | object | {} | Attributes to be applied to first and last links' components. | | object | {} | Attributes to be applied to first link component. | | object | {} | Attributes to be applied to last link component. | | 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 `{some text}` | | 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 `{some text}` |