1.0.17 • Published 4 years ago
reactjs-hooks-pagination v1.0.17
Simple React Hooks Pagination
Simple pagination component for ReactJS.
Installation
npm i reactjs-hooks-pagination
with yarn:
yarn add reactjs-hooks-pagination
## Example 1
import React, { useState,useEffect,useReducer } from 'react';
import Pagination from 'reactjs-hooks-pagination';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
const pageLimit = 5;
const initialState = {
user: {},
loading: true,
error: ''
}
const Reducer = (state, action) => {
switch (action.type) {
case 'OnSuccess':
return {
loading: false,
user: action.payload,
error: ''
}
case 'OnFailure':
return {
loading: false,
user: {},
error: 'Something went wrong'
}
default:
return state
}
}
function App() {
const [state, dispatch] = useReducer(Reducer, initialState);
const [offset, setOffset] = useState(0);
const [totalRecords, setTotalRecords] = useState(50);
const [currentPage,setCurrentPage] = useState(1);
useEffect( () => {
axios.get('http://5e709ac5667af70016317119.mockapi.io/users?page='+currentPage+'&limit='+pageLimit)
.then(response => {
dispatch({ type: 'OnSuccess', payload: response.data })
})
.catch(error => {
dispatch({ type: 'OnFailure' })
})
}, [currentPage]);
const {loading,user,error} =state;
return (
<div className="container mb-5">
<table className="table table-striped">
<thead className="table-success">
<tr>
<th>#ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
{loading ? ( <div>Loading ...</div>) :(
error=='' && user.map(data => (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.first_name}</td>
<td>{data.last_name}</td>
<td>{data.email}</td>
</tr>
)))}
</tbody>
</table>
<div className="d-flex flex-row py-4 justify-content-end">
<Pagination
totalRecords={totalRecords}
pageLimit={pageLimit}
pageRangeDisplayed={1}
onChangePage={setCurrentPage}
/>
</div>
</div>
);
}
export default App;
## Example 2
import React, { useState,useEffect,useReducer } from 'react';
import Pagination from 'reactjs-hooks-pagination';
import axios from 'axios';
import 'bootstrap/dist/css/bootstrap.min.css';
const pageLimit = 5;
function App() {
const [loading, setLoading] = useState(true)
const [error, setError] = useState('')
const [user, setUser] = useState({})
const [totalRecords, setTotalRecords] = useState(50);
const [currentPage,setCurrentPage] = useState(1);
useEffect( () => {
axios.get('http://5e709ac5667af70016317119.mockapi.io/users?page='+currentPage+'&limit='+pageLimit)
.then(response => {
setLoading(false)
setUser(response.data)
setError('')
})
.catch(error => {
setLoading(false)
setUser({})
setError('Something went wrong')
})
}, [currentPage]);
return (
<div className="container mb-5">
<table className="table table-striped">
<thead className="table-success">
<tr>
<th>#ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
</thead>
<tbody>
{loading ? ( <div>Loading ...</div>) :(
user.length>0 && user.map(data => (
<tr key={data.id}>
<td>{data.id}</td>
<td>{data.first_name}</td>
<td>{data.last_name}</td>
<td>{data.email}</td>
</tr>
)))}
</tbody>
</table>
<div className="d-flex flex-row py-4 justify-content-end">
<Pagination
totalRecords={totalRecords}
pageLimit={pageLimit}
pageRangeDisplayed={1}
onChangePage={setCurrentPage}
/>
</div>
</div>
);
}
export default App;
## Example 3
import React, { useState,useEffect } from 'react';
import Pagination from 'simple-react-hooks-pagination';
import firebase from './Firebase';
import 'bootstrap/dist/css/bootstrap.min.css';
const pageLimit = 5;
const Reducer = (state, action) => {
switch (action.type) {
case 'OnSuccess':
return {
loading: false,
user: action.payload,
error: ''
}
case 'OnFailure':
return {
loading: false,
user: {},
error: 'Something went wrong'
}
default:
return state
}
}
const collection = firebase.firestore().collection("users");
function App() {
const [offset, setOffset] = useState(0);
const [totalRecords, setTotalRecords] = useState(0);
const onPageChanged = page => {
const offset = (page - 1) * pageLimit;
setOffset(offset);
}
useEffect( () => {
collection
.orderBy('id')
.startAfter(offset)
.limit(5)
.get()
.then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
dispatch({ type: 'OnSuccess', payload: data })
}) .catch(error => {
dispatch({ type: 'OnFailure' })
});
collection.get().then(function(querySnapshot) {
setTotalRecords(querySnapshot.size);
});
}, [offset]);
const {loading,user,error} =state;
return (
<div>
<Pagination
totalRecords={totalRecords}
pageLimit={pageLimit}
pageRangeDisplayed={1}
onChangePage={onPageChanged}
/>
</div>
);
}
export default App;
Props
Parameters | Description |
---|---|
totalRecords | Total count of items . |
pageLimit | Count of items per page |
pageRangeDisplayed | Range of pages in pagination, exclude navigation blocks (prev, next, first, last pages. |
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.13
4 years ago
1.0.11
4 years ago
1.0.12
4 years ago
1.0.9
4 years ago
1.0.8
4 years ago
1.0.10
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago