Create Responsive Image Gallery in React JS using Ant Design Components | Image Grid React JS App

hello guys welcome back in this video tutorial we will learn how to create a photo gallery or the photo grid application using rep JS and end design components we will see how to fetch the images from a server API and show them inside the grid of the cards and add a nice horror fact on each of these cards also we'll see how to add a search feature on that so that we fetch the related images based on the user search also we'll see how we can add a preview feature on each of these cards so that user can navigate between different variations of the same image and user can rotate the image or Zoom to see the details of each image to see how we can achieve that let's get started I have an empty react.js project that is using and design and right now it shows nothing so let's go ahead and start adding different components to clear the app gallery or the photo grid application so on the top we can show our typography that's showing the name of the app so here we can say the typography from and design and we can say it's a title and uh the test we are going to show is you can see Army's gallery so if I save it here you go so we can add a letter style to it and we can say it's text align is Center there you go and let's change the font family of this one as well so maybe we can say it is a mono space let's save it okay looks good so we have added the title then here we can add a search bar so for that we can say again and add an input from the end design and we can say dot search it's the search bar right if I save it here you go so we can add a little style to this one as well we can say the maximum width of maybe is it maybe 500 pixels so we can see the max width is 500 and also we can say its display is Flex and we can add a margin as an auto so that it's centered right and I can write anything inside that right so we can implement the function uh the onset function right and it will give us the value that user has entered and we can save that value inside our state so let's delay rusted variable here and here we can say used it the searched text and by default it will be empty and let's import it from the react so once user enters anything inside that and hit the enter button uh then this on search function will be called and we will be getting the value that user has entered inside that so we can save that value inside our state we can say set search does to the values that user has entered right we have shared this value and later on we will be fetching our you can say the photo grid or the the pictures based on the various user has searched right okay after that uh after this search we will be showing a list of the photos right so here we can show the list and insert that we will provide in the data source so let's declare the our data source here as a state so we can say you state data source and by default it will be an empty array right and on the start of uh the application we will be fetching all of our images from uh server so we can say inside uh use effect we will be fetching our photos so now in the dependencies we can add the search text as a dependency so as soon as users enters something here and user hit the enter so our state will be changing and this depend dependency will be changing and as a result this use fact will be called and here we will be making the API call right so what it will be doing is as soon as we made a search here it will make another call and fetch the related search photos from the server right and for the photos we will be fetching all of those from uh demonstration and for that we will be using uh search products API call so what it will be doing is we will be fetching it and we will be providing our search query here and it will be showing us uh all of the products so from here we will be only using the thumbnail that mean we are only using you can say the images right so we are showing the the grid of the images and we will be searching against this API call provided by providing the search text here and it will be giving us a list of products and from there we will be only using this terminal key right so we have been making the way that we have saved the images on the server and we are fetching those here right so we can copy this one and we can add that here we can say fetch that and Q will be equal to the such text instead of this phone so we can add that inside the back tick and here we can say taller the search text and okay if I save it and instead of the cons console here we will be getting the response and we will be saying that set data source to the response the spell is not correct okay so we can see it or it's a response dot it will be in the products right so we can copy this one and it will be response dot products right so in the dirt Source we are saving all of these products right and here in the list we will be providing the data source that we have inside our state and then we will implementing the render item and it will be giving us the item and here we can return uh any of our common component so here we can return a card so we can say return a card and we can provide the key to it uh what is unique it's the ID right so we can say it's uh item dot ID right let's import that card from the ND and save it so what it shows use effect is not import it so let's import the use effect save it here you go it has added all of those rows right so here inside the card we can add anything that needed so we are only showing the images so we will be returning the image component from the end design so here we can add the source equal to the item dot thumbnail so the same property we have here the thumbnail right okay if I save it here you go it has added the images fetched from the demonstration right and I can search here anything we can say it is a famine so it has shown uh the items those are related to the government and if I change it to something else maybe we can say home it shows the images related to our home so while I am changing this such text we can show the loading while it's fetching the new images so for that we can declare a State variable here then we can say the use State loading and but for its false and here when we are making the AP call then we can say set loading to true and once we have the data then we can say set loading to false right and here in the list we can add a loading prop so it's a loading prop and it will be equal to the Loading we have in the state right maybe I can change it to lab here you go it was showing the loading right and if I make it to full screen right now it's showing one card in a row so we can change it to maybe three chord or four chord or maybe we can make it uh responsive so that uh we are showing the card based on the available space so for that what we can do is we can say inside a grid Pro and here we can see if it's a the XS resolution then show one card and if it's a small resolution then show maybe two cards and if it's a medium then show three cards and if it's a large then show five cards and if it's a Excel then show six card and sorry it should be four and five and then if it's a double XL then show the uh six card right so for the very small we are showing one card then two three four five and six cards right right so we are gradually increasing the number of cards as the resolution increases right if I save it here you go it has shown five cards on my screen it will increase to six cards or it will decrease uh the number of cards as soon as I'm decreasing the resolution so showing three cards in this resolution and I am decreasing it showing two cards and then let's go to the one card right and here you see that each card is not of equal height so we can add some styling to the card so here we can say uh the style to the card is equal to you can give it uh height of maybe 300 pixels if I save it here you go it has added the equal height to all of these right and we can add a little margin between these cards as well so we can say the margin is Maybe the 12 pixels and here you go it has adjusted margin as well and if we click on any of this image it will show that in the preview right as you go and we can show different images in the preview as well so if we go to the API call and it is returning us some more images as well so we can show these images in the preview as well so let's Implement that and here we can say in the image we can say the preview is equal to we can say it's visible is false so we won't be showing the preview from here so now if I'm clicking on this we are not showing the preview right so instead what we will be doing is we will be showing preview inside a different uh preview group so here uh we can say on click of this image we can save our images inside uh you can see the state right so here we can say the preview images inside the state you state review images and what part it will be in empty array right and here as soon as we get click on any of the image we can say set preview images is equal to the item dot images right so we have the premium images inside the images prop right so we can see we are setting the preview of just inside the state right and after the list here uh we can say if the preview images dot length is greater than 0 then we can show some we can say image dot video group right and inside that we will be showing all of our images from the preview images array so here we'll be looping on that we can say the preview images dot map and it will give us a single image and here we can say but it's missing here okay and here we can return the image with the source is equal to this image right and this we can close it right and if the length is equal to zero then we will be showing nothing right sorry it should be inside here and right and also uh here we can see the preview is equal to it's visible it will be true if we have anything inside the uh preview click any of these here you go we have shown the preview images so 405 right and if I I can even rotate that Zoom that I can zoom on any a particular part maybe here right so it's very a cool feature I can zoom in any part of the image right now if I click on the close it's not closing because we have not implemented the visible change method so we can say on visible will change it will be and giving us a value whether it's shown or not so here we can say if not of value if it's false then we can say set preview images to the empty array right so if I save it now so no if I preview it and if I click on the close it will close and if I click anywhere else it will again close right so I can go to any other category so click on any of these images so 105 2535 right so we have shown all of these images in a preview instead of a single image right and we have made our app responsive so if I go to in a mobile view and go to maybe the iPhone this is how it will look like right and here we can add a little padding here as well right so let's go to the code and on the very top so maybe instead of this fragment we can say it's inside a space and from my design and we can see give it a style of adding of padding maybe we can say it's zero pixel from the top and the bottom and maybe uh 16 pixel is enough from both sides and we can add extraction to be vertical okay the attraction is vertical now if I save it here you go so the title then the search text and then showing the images right and if I change this to maybe pixel 5 again one card and if I change it to iPad Air showing three cards right and if I change it to maybe the Galaxy fold the one card and on the next hub it's showing the four cards right and I can search here and if I again go to the desktop this is how it will look like on the the desktop version right and here on each of the card we can add a hoverable effect on each card as well so for that we can go to the card and we can say it has a hoverable as true and if I save it and come back here you go it has added a very nice hoverable effect right and also we can add some text here we can say showing results for maybe this search text right so for that we can go to here and we can say under our typography dot simple text we can say showing uh results for and here we can say if there is anything in the search text then show that otherwise we can say for all right and if I save it here you go show results forever man and if I make it empty it shows how far all and if I change it to maybe laptop changes for laptop right and so it's all for home and here you see it has added the image in a full height we can add a styling to the cards like that it is the Overflow is hidden so here we can see the Overflow is hidden if I save it here you go so it has added the image within the container of the card right maybe we can make this home as a bold so we can say uh this is again a typography dot text and wrap that this text inside that and we can see the strong is true if I save it there you go so it show results for home change that file from in show is all for men okay show results maybe we can see the watches right so this is how we can create a guarantee app or we can say the photo grid app and we can add search on that and we can fetch all of our images from the server so as a summary what we did is uh we created some State variables uh we have created such tasks to to capture the whatever user has entered inside the search and then we have added a data source to save all of the images that we have fetched from the server then we have created our loading state to show the loading while we are fetching the images and then we have created our preview images to show the images in the preview when user click on any of the uh these cards right then we have added a use effect inside that we have added the dependency of such tests so that as soon as user changes the search and hit the enter button this use fact will be called and we show the loading as true at the very start and then we fetch the images and we search the loading to false once we have fetched fetched images and we have updated the our data source accordingly right and in the return or the render uh we have added the space we added the space only for adding the padding uh on the left and the right side right and then on the top we added a typography for showing the app name then we added the import search and added some Style on that and on search we are only changing our state right and then we're showing uh some typography to show the results based on the user search and then we are showing the list and setting is loading to true or false based on the state variable loading while we are fetching it will be true and once we have fetched images it will be fast right and we added our data source there and we have made that responsive by setting the grid for each of these resolutions uh setting different cards for each of these resolution and then in the render item we are returning a card and setting is over able and adding our unique key and then giving it a style and in each of card we are showing only the image right and and and once user click on the image we set the preview images uh based on that particular atoms images right and at the end we are showing the preview and once we click on the atom we will be setting the images inside that and if we have set that then the length will be greater than 0 and we will be showing the preview images right and setting the previous uh true or false accordingly and on change of this when user click on uh anywhere else or click on this close button then this visible change will be called and if the visible is false so because when user click on this one it's visible is true right now right so so once the visible is false then we will setting the previous to uh the empty rate right so that's the preview whole this preview is not rendered instead it will render the null right so this is how we have created a gallery or the photo grid application but still if you have any questions please let me know in the comments below and if you have learned something in this video please hit like subscribe to my channel see you in the next video thank you

Channel: CodeWithAamir

Views: 6,552

Keywords: reactjs, antd, ant design ui, react antd tutorial, react ant design, codewithaamir, Create Responsive Image Gallery in React JS using Ant Design Components, Image Grid React JS App, Image Grid React JS, antd card hover, react gallery grid, react photo gallery, ant design image preview, image grid react, antd list responsive columns resolution, responsive image grid react, search image gallery, search api photo gallery react js, image gallery react, react image gallery, fetch APIs

Id: ZoR2pNbwTNs

Length: 23min 44sec (1424 seconds)

Published: Mon Jan 30 2023