Create Scaffold

At home class, create a scaffold widget and inside that widget add drawer.

Scaffold(
drawer: const CustomDrawer(),
body: ....
)

Create CustomDrawer

...
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children…

--

--

It’s very simple to pass the data query to the route in NExt.js

At first you need to initialize it:

const router = useRouter();

and import from next/router

import { useRouter } from "next/router";

Then you can use it like:

router.push({
pathname: "/list",
query: { search: "support" },
});

The following code results to:

http://localhost:3000/list?search=support

Pass multiple queries

router.push({
pathname: "/list",
query: { search: "support", limit: 10 },
});

This results to:

http://localhost:3000/list?search=support&limit=10

You can pass multiple parameters as well might be integer, string, boolean.

you can pass dynamic data as well.

Dynamic pass route

var searchData = "elonmusk";
var limitData = 15;
router.push({
pathname: "/list",
query: { search: searchData, limit: limitData },
});

This results to:

http://localhost:3000/list?search=elonmusk&limit=15

Follow me @slimpotatoboy at twitter.

--

--

To use pagination on the react app, there is this npm package called react-js-pagination which is very easy to use and effective as well.

Prerequisite
-Create-react-app
-Bootstrap

I won’t be teaching how to create react-app .

Install React-js-Pagination

Install with npm:

npm i react-js-pagination

OR Install with yarn:

yarn add react-js-pagination

Import Pagination

import Pagination from "react-js-pagination";

Setting Up Active Page

const [activePage, setActivePage] = useState(1);

Creating Pagination Component

<Pagination
activePage={activePage}
itemsCountPerPage={10}
totalItemsCount={data.count}
pageRangeDisplayed={5}
onChange={onChangePaginate}
innerClass="pagination"
itemClass="page-item"
activeLinkClass="page-link active"
linkClass="page-link"
prevPageText="Previous"
nextPageText="Next"
/>

setting onchange function

const onChangePaginate = (pageNumber) => {
setActivePage(pageNumber);
// to set offset
console.log(pageNumber * 10 - 10)
};

Visit React-JS-Pagination for more information.

--

--

Dipen Maharjan

Dipen Maharjan

I am a passionate Developer, been working in this field for more than 2 years. I have keen interest in Frontend Development and Flutter App Development.