ReactJS Pagination Tutorial using React Paginate

[Music] hey guys and welcome back to another youtube video in today's video we'll see how we can create a pagination in a react.js and for that we will use a library which is called the react paginate and then to understand how this library works we will create a sample project which is this one so we will fetch some images from an api and then in each page we will show six of those images and as you can see we have the pagination here and by clicking on different page numbers we will get to that page we also have two buttons for next and the previous so by clicking on them we will get to the previous or next pages okay guys so this is what we will create now let's get started so as you can see i already created in react app so if you didn't already you can start by creating a react app then i also added some styling so as you can see i added a google fonts here and added some default styling for all elements and this part is styling for the images as you can see i didn't add a soiling for pagination because i thought we can do it together so you can see how you can store the pagination so the next step will be to install the react paginate and for that you can go to this page again and i'm gonna also put the url to this page in a description so if you want you can find it there then to install this or yet paginate you can either copy this line or you can copy this line and then you can open a terminal in the same folder as your app and then paste it and then press enter so now the react paginate is installed the next step will be to fetching the images for the images we will use this api and as you can read here it is a free fake api for testing and prototyping you can click on this guide here and scroll down and here you will see an endpoint which is all boom albums one photos and if you click on it you will see we are getting 50 objects and each object has a url and this url is the image so we'll have 50 images and now you can come back to this app.js and here we need the first to import use effect hook and use state hook and then here we can create a state for images set images and it will be user state and by default it will be an empty array then we can use the use effect here and inside it will fetch the images and for dependency on this use effect we will put a empty array which means that this this function inside the this function will be executed just once and it will be the first time this app is app component is created so here we can fetch the images and we can use the fetch api and for the url you can copy this url and then paste it here the fetch api will return a promise so we can use it then method the response as a method which is called the json we can use this method to convert the response to the javascript objects and then this json method will return another promise so therefore we can use the then method again and here we will get the actual data that we want so here we can set the images to data now we have the images let's create another component where we can show all these images and also add the pagination so for that you can right click on the source folder and create another folder for components inside it you can create a component and call it images here we can import the use packed and they use state hooks from react and then for actual component we can type export default function and the components name which will be images and then we pass the props inside this component we can start by getting the data from props and this data will be actually the images that will be passed to this images component then you can go back to this page and if you scroll down you see a usage title and under this usage they've showed you example of how you can use this react paginate library and here you see also they've created a paginated items component so what we have to do is to copy all the code inside this component so we will copy it and then paste it after data then let me fix the indentation here and also here so now you can remove actually this items component we don't have any items component and you can also remove these comments and then you can remove the console logs as well we we also need to add the item pair page so you can add it after this item offset and this item items per page will be actually the count of the items that we want to see in each page we also need to change the these items to data because now our items is actually this data and we can change it here and here and also in line 18. so one more thing that we need to do which which will be here and i use the effect so we need to pass this data as a requirement to this userfacehook now let me explain what these codes do so you see after this data we've added a state which is called the current items and this will be the items that will be shown in the current page and then we have a page count which will be the count of pages then we have an item offset and this item offset is actually the index of the first item in the current page and then we have a user effect here and for the requirement of this use effect we've passed this three this three and each time one of these all changed so these codes will be executed inside this user effect we have a end offset which will be the last which will be the index of the last item in the current page and then we are updating the current items and the current items will be the items from item offset to in the offset from this data and then we are updating the page count at the bottom you see that uh here we are returning a react paginate uh component and this is a react paginate component that actually could be imported from react paginate so and in this component we have to pass some props as you can see we we have to pass a brick label the brick label will be these three dots as you can see here and then we have the next label which will be the text of the next button then we have a on a page on a page change which will be a function and so each time we are changing the page this function will be called and in this function we are updating the item offset and here here we are getting the new offset then we have the pager range displayed and this is actually how many page number we want to be shown before this brick label and by default is five but you can change it to three then we have a page count and as you can guess it is the count of pages and then we have the previous label and then at the end we have the render on a zero page count which is which will be the node so as you can see right now we are showing the imagination which will this component do but we are not showing the images to show the images we can create a div tag here and we can give it a class name and name it images then inside it we can look through the current items and the current items will be the images in the current page and then we can use the map to the loop through them so for each image we want to return we want to return a div tag and inside this div tag we will have the image the source of this image will be actually the image dot url so as you saw in a beginning we each of these items which will be the same as this image has a url and this url will be used here in the image source then we also need to add the alt property and for that we can use the image title so we also need to add a class name here and name it image then we can go back to the app.js and import this component that we've created images from components and then images then in a return in the component in a return we will return a div tag inside it we will have the images component and as i said we need to pass the images as the data to this images components so we can type data and then pass the images so now let's run this app and see how it looks like so if we don't get any error and here okay so we are getting an error and it says that cannot read the property of an null and reading the map and it is i think here we are getting there or here and it can be because we have by default no and no will not have a map function so it should be an array empty array by default now you see that we have the images and we have the pagination here but we need to add the styling to it to add the styling to the pagination we need to add some extra props to this react paginate component so the first one will be container class name i can give the name of pudgy nation the next one will be page link class name and i can give it the name of page number and then the previous link class name and it's also page numb then the next link last name and also page none then the last one will be active link active link class name and it will be active so and these [Music] props you can actually find them here in this props these props the list that they gave you so you can find all of them here and if you look a bit closer you see that we have some some which is just a page class name and page link last name or active class name and our active link class name so some of them have the link and some doesn't so for that to understand them you can open this page again and inspect so and then we can select the pagination so you see that we have a class here pagination so this is a container and which is an unordered list and here we have some list items and each list items will have a tag which will be the page number or the next or previous button so here when we've selected page link class name actually we gave a class name to this a this a but if we remove this link from it it will give them give a class name to this list items instead of a tax and it will be the same for next and the previous buttons okay so now you can open your css file and here we can style our imagination so we had a pagination the container so we can first set the list style to none then set the display to flex then justify content to center and align items center we can give it a margin bottom margin 5 ram then font size we can change it to 1.2 ram and then we can add a gap 5 pixel so right now if open it again so you see then we can we can add a styling to each of these buttons and we can do it by typing it pagination and then page number so which we gave here so now for them we can add a padding for the top and bottom it will be 8 pixel and for the left and the right side it will be 15 pixel and also the we can change the cursor to pointer and the border radius will be 3 pixel so right now if i open it so it looks like this then for the hover effect so when we hover on those buttons we can type pagination dot page norm and hover and hover we can change the background color so then the color will be white it looks nice then we can [Music] also change the active page number so the styling of the active page number we can type imagination active and then we can have the same background color now we have a full functional imagination so this means that this will be the end of this video i hope it was helpful and i hope it you enjoyed it and if you did make sure you like the video and subscribe to channel if you have any questions you can leave it in the comment section below so i'm gonna answer them if i i knew the answer so see you in another video

Channel: Index-Zero

Views: 36,134

Keywords: react pagination tutorial, react pagination, reactjs pagination, react pagination with hooks, react pagination with api, react pagination library, reactjs pagination rest api, React custom pagination, pagination in, pagination in react js, reactjs pagination tutorial using react hooks, react pagination with api call, react pagination table, react pagination component

Id: Y48V8gNUvew

Length: 21min 19sec (1279 seconds)

Published: Thu May 12 2022