Swipe Gallery on React + TypeScript: navigation, counter, hooks. Part 2.

uh hey everyone with you elen linova and in this video we will create with you we will continue actually our previous lesson about CSS gallery and in this lesson we will write a performance Gallery with react typescript and with as a builder uh actually uh we will think about architecture on react uh as on uh really which you actually can use in your applications and if even you work with quite large projects so we will think about architecture quite good uh also we um will write uh Hooks and oven hook as well uh in this uh video and uh we will create next example let's see on it and yes we will car about performance as well with this Gallery at the end of the lesson we will uh got the gallery like this uh which is swipe gallery and works quite good on desktop and uh if you for example open open a mobile view so you can swipe it very good with good physic and also we will have here arrows we will have here counter and we will be able to go through everything of it and uh also we will care about performance it means that we will pre preload images for example on first step we preload second image so when user uh swipe on next image uh he or she always seees the next image without waiting it and after it we will pre preload third four and Etc when you scroll so preload previous and uh next one everything of it or we will uh write in this lesson I will left um GitHub repo with this Gallery also under in the description under this video so you will be able to look at let's try to create the gallery with react and go through it so but before of course not forget to subscribe on this channel press Bell icon and [Music] go so okay let's start first let's go into the folder from the previous lesson where we finished if you not started previous lesson you can go and study so uh in the previous lesson we created CSS Gallery which is swipe uh and very good works on mobile and desktop but how we see on mobile we have a small bag uh but we fix it we fix everything in current lesson and on desktop we have uh this gallery so uh from the previous lesson we have just only one company in spye gallery and now let's add additional files which we can use so uh we need types. TS here we create all common types which we need we will need icon name uh for Arrow left and arrow right uh it's our buttons and also we need a type for comp and props which is common uh props and here we will put just uh children which is not required it's react uh react uh not and uh class name uh actually we will extend these um component props in our components so um just put some common types so and which components we will have it will be icon it will be button and it will be counter for our galleries actually it looks like Atomic components so very small and in each component we need create couple of files index tesic and index s CSS so in each component now we creating it and after it we started to uh write code in these files okay firstly let's start from component icon here we also will need images folder because icons have images and there I decided to use uh SVG icons from first icon and you actually can download it there um uh so if you try to type uh Arrow you can find two icons Arrow left and right so I just basically download these two icons and put them into images and that's it so let's start to write our component uh firstly I import class names uh Library which really good helps to communicate and um with classes but before we need to install it in our npm so npm install class names save Dev so perfect start the project again and continue right in our component next what we need to import it's basically our types we which we just created icon name and component props from types and the last thing which we should do import is our CSS so our company sh looks perfect uh and let's start because we write on typescript before we need create an interface with props uh we will create icon props which is extends from company and props and inside of it we will have name it just B basically icon name and for Icon that's it we have just Arrow left Arrow right if you need for example you continue the project and you need more icons you just put the there all needed values okay continue export cons icon here we have name and class name for example if we use this component somewhere else and we just need to add some additional uh styles for it and of course it depend on of our in interface icon prop switch so and basically uh what we have here what is icon I decided to use just uh inline element span which is Neal element and here put class name which is class icon also it need put here icon with name we will put images through CSS so we need just additional class uh where our name will figure out and class name and that's it simple simplest HTML for our company so next what we need to do for our icon it just creates Styles and first of all it will be displaying line block so we will be able to manipulate with sizes so width and height 30 pixels uh what is next next we will need to work a little bit with backgrounds because we will use our images as a background so background size contain uh background position uh it will be um Center Center and background repeat no repeat uh I think that's it but we need to put right background image for uh icons so we need Arrow left and here we put background image for URL and basically we we have here uh images and after it Arrow uh left Circle SVG which we actually saved in our images folder the same we just need for our uh right arrow just only arrow right Circle H that's it and uh our component icon basically r actually everything is ready we wrote everything so next company at which we will work it is button uh so what we need here again we need import class names uh from our library for class manipulation after it we again need to import icon name and uh component props we will use in button also icons so that's okay uh and we import it from types as well and and of course component icon which we just created we will use it in button and CSS so our component bottle will be stylish how it possible to say right yes and again we have the interface button props extends of component props and inside what we have in button it should be on click because we can click on button it's just basically simple function without any return uh we have here icon name which is not required and we can have here disabled as well buttons can can be disabled it's just bulliet also not required by default we put false and just fix uh tupo and let's create the component so export con button and here we have a function and inside of this function so we need to add props it's icon name it's children they also can be uh it's on click uh it's disabled which by by default is false and its class name and of course not forget to pass the interface that we doing everything the rightest way so after it we have button which is just HTML and inside of it we have icon name uh for example what we can have here icon name if we have it because it's not required and here we render a component icon or we should to have children here also if you have or not have uh yes and um also not forget about onclick on the button so we should to pass our function or we should to pass here class name uh here it will be button it will be class name and disabled as well which we have by default we have FAL so our component is ready let's go to CSS and write the our awesome CSS there so we have background uh which is not actually we just need to reset some Styles so our component not looks like from 19th years so border n csor pointer ping zero margin zero and uh display what is display in line Flex yes because we want centralize actually I think it should Works without it because elements in buttons should be centralized you actually can check but anyway just guarantee the result we put display line block and Center it uh by width and height and on Hover we put opacity 0.5 so yeah basically our component button is ready see s has been written and yep that's it what's next next is counter uh and here again we should repeat the same algorithm which we did previously but let's just copy it because we are lazy you know for what write again and again and again just lazy copy everything remove things which you don't need just uh I name we don't need CSS we need okay cool and next interface of course how we can forget about it uh interface counter props whiches extends um why not extends it okay active index number size number uh basically in this component we should have active index and um size just very simple easy company component the simplest which you even can see so uh and create the component uh so we have a pass active index and size and it's depend on counter props and we return just basically what is De element also Neal element I think here it's also possible to use uh some inline element but I decided to use natural diff uh here we also have class name we pass counter uh and class names uh and pass it here and then we should to render something around active index slash size that's it and basically yes I forgot to extend it from company in props and I fix my mistake and everything works perfectly next what we need to do is just write our CSS here we have counter display in line Flex align items Center justify content Center just we just need to centralize everything around this counter uh big brown I decided put slightly Gray e a e a e a and what next padding two pixels from tops and five pixels from the um left and right and small border radios just make some beautiful styles and I also put uh font weight 500 which is not super bold basically but it's connect with icons and I decided to just put it so um uh actually we finished everything our button is ready our counter is ready and our icon is ready too okay uh what we should go next uh we continue we go back in swipe Gallery but before let's check that we not broke anything actually we are not but uh we firstly need to fix this uh centralized of images so we just play display Flex align items Center and justify content Center so just put um on the center this images and our loader will be hidden after it yes uh and it works actually really better and what next next we uh return back uh in our swipe gallery and we need to continue work with this component because we just create create uh Atomic components but we not use them and now uh our task actually we need to add here all our created uh components uh here we will have class uh name which is navigation and inside of it we will have um two buttons and counter uh and we of course need to import everything import button and import counter and before we also need to import some hooks which we will use from react first hook it will be your State uh firstly we need it for active index which we will use uh active index and set active index and uh here by default we put zero but uh actually if for example you have um it you can have first image from the settings from the props but uh I decided not do that and just put zero okay in navigation we should to put our button uh so first button Arrow left uh disabled when active index is equal zero it should be disabled because we don't have previous image and on click just put for now for temporary I think uh something like empty function and that's it or we also copy this button because we also need Arrow right and uh here active index when equal images length we should disable this images length mean minus one and uh by the middle we have count counter and here we um have active index and inside of it we have active index + one because our active index start from zero here we need plus one and size just images length and actually our HTML um ready yes and we even can try to look at what we have and you can see the small buttons and small count counter let's a little bit work with our navigation show it looks a little bit more pretty maybe so we will pick up navigation and here we will have parting maybe 10 pixels from top and bottom uh we will have text align Center but after I decided to use display grd actually and grd uh template columns Auto auto auto and actually we don't need text line Center and we can remove it and you can see now it looks quite good we remove text line Center but the problem we have vertical scroll and we need somehow to remove it so just to check how much space have our uh navigation it's around 15 pixels so we just say 160 and everything so perfect on one screen and we can scroll we can go we can play and our layout looks quite pretty nothing works actually if you just can uh swipe our images but counters button nothing works we need to write all logic now so but before Let's uh create uh disabled Styles because I have not edited and we need to use this selector and if we go back to our button and we put here disabled and here uh if it disabled it should be Cur default I made a mistake here and uh default just not pointer and opacity we can try 0.5 but it's not enough it's disabled it's better almost disappear so 0.2 and we have actually the navigation like that all our components works perfect and yep what's next next we should create our logic we have component Gallery container and we need actually somehow manipulate with this container and to understand which counter exactly we now have which active index we have and depend on scrolling uh we will write our own hook now and for that before we need create uh rev uh for this container what I'm doing now and second one we also create scroll active index so understanding active index by scroll and this information we will pick up from our own hook use update active index where we will pass container ref basically and our hook we will write in swipe Gallery so we put here a folder hooks we will create here new hook which is T six and what next we need to import some hooks from react and also we will use use effect and um let's pass container R to our uh div element and also we need to create here a function which will will be able to export just to make logic uh right working so we do expert function which is use update active index here we pass our container RI which is react dot ref object and here we pass HTML def element it's actually uh in our context this def element so everything is okay and uh also we just in with this hook we will return active index depend on scroll because of that we need to use some hooks from react uh we write in our over hook because of that we are call our function uh use update active index and inside of this function we can use others hooks from react basically it's differences between uh common function from JavaScript and just hooks uh in hooks function we can use hooks from react so we create active index set active index again use state zero and return active index uh we will write uh last logic a little bit later but before let's import everything and make that everything works so we import use update active index from hooks use update active index and um actually we will update uh our counter but now it doesn't work that's okay and yeah what we need to do for here so uh from this function use update active index we will uh got which is index from scroll but we need to set it in our active index from swipe Gallery so we need to use uh effect and if scroll active index Chang only in this time we set say set active index on scroll active index yes so basically our hook here already should to works but we need um yeah and how you see everything active index already on places but we need to write our hook and yeah just check that everything works we don't have any mistake if it load yes everything is good uh we need to continue on our function so let's start uh we start from use effect uh and uh this is callback fun function and also we should to pass second arguments and AR with container R because we will use it in this function and let's go uh first of all we need to find current node it is actually container r dot current uh and after it if for example for some reason we don't have this current node but we should um anyway if we don't we just do retor after it we need a scroll function which we will wrot now uh we will write now and after it we actually should to put on our current not uh at Evan listener and here put scroll and our call back scroll actually and when this component is destroyed this hook we should to remove this said event listener so I use Uh current note and remove it event listener from scroll and that's it now let's just write logic and scroll so what we have here uh if if you look on our Gallery uh we need to understand on which uh index now we have when we scrolling we have our container and also yeah if you look on HTML or we have container which is basically just have some place on our Gallery uh and also we have a first element which actually can be scrolled and we can calculate active position depend on first element shift and uh depend on container and we will do that for that we need information about this container so current node and we use function get uh Bound in get bound incline wrecked uh and uh there is all information about container left top and Etc and also so we need to uh get our first element from this container and it will be uh current not first element child and uh get bouncing client wrecked actually the same we need information about first element and information about the container but at the same time we need to check again uh is any information and first element dat data or not and make return uh okay what is next after we have shift when we from first data element left we minus uh data container left because data container left start not from the uh zero yeah we have some space there and also left element also have uh shifting and what next uh after it we set active index and here we use a formula we use uh UPS inside of it Mass round and here we just divide shift on uh data container with and actually this formula helps us to get active index let's a little bit console.log so better understand what we have so we have the data container left first element left if you scroll in you see that uh container left doesn't change but first element change it's minus 711 if you put with container so we actually see that this 741 if we check shift so if we uh minus elements we actually see minus 7412 and if we divide a shift on width so we will have a value from 0 to -1 and uh if we will use round function it will have or zero if it less than 0.5 or one if it larger because of it actually our number will change exactly on the middle between images and this is actually create really uh Native behavioral very good when uh images on the middle so you see how it changes and of course we should put here ABS so don't have Minos and that's it it's basically our formula and everything works very perfect we remove console.log and return back to our component our hook actually ready and we just need to check that uh we not render our component a lot of times I decided to put console.log and use effect and we see that uh looks everything really good so go next next what we need to create it's our function move uh which we use in buttons because our counter already works good and here we will pass new active element actually it's new active index but I decided to call it new active El element and uh inside of it we actually should somehow to make some things which will move our Gallery by arrows but before we need to get this new active element or index and we need to write a couple of function about increase index which we pass index there and size and there we should use minimum between uh in index and index + one and size because we can + one + one + one but we shouldn't be larger than size minus one yeah minus one and decrease index so here we actually just need a maximum between zero and index minus one so here we don't need size actually and this is increase and decrease indexes and let's try to somehow use it so we should use function move the logic uh we will soon write so for Arrow left we should to call Mo Fe decrease index and from right this increase index and let's here write some logic so we have just make animation here in MO function so we again need con current node so container R and also we need check exists it or not and make return uh and after it we should to uh data container uh to uh get our information about current not again get balancing client rck here we also actually can make set active index but maybe uh just here set active index will do it faster but maybe we don't need it actually you can try to remove it because we have used effect before and maybe we can work without it and what we need to do next our current knot uh scroll scroll two and inside of it we have left and here we need to multiply data container with with new index actually so and um yeah and uh last thing we just need to add behavior and this will be smooth and let's check works or not and if we click on our arrows everything works so perfect our scroll working everything working with that indexes we can go further and further and our Gallery actually works now everything is amazing but last thing which actually cool to do is preload images so for that we create a special function is loaded and here we pass index uh and there we just check previous image and next one it's very simple with just small logic active index minus one is equal index or plus one is active index and and of course active index is theal index and that's it and we should to use this loaded function um in our loading lazy so we just call this function from uh index and if it's true we return undefine it if it's not true we return lazy and if we check our gallery and go into Network up we will see that we download couple images and uh so preload second image and each time when we go further we preload next one so everything works very right uh if you go on mobile we also have the same behavioral so here everything very good as well so I hope uh this video was very helpful for you you you started and learned something new and of course not forget to put me like and uh Bell icon And subscribe of course uh see you in next videos with youber L [Music] Lino

Channel: Elena Litvinova — The Art of Web Development 🛸

Views: 344

Keywords: Elena litvinova, webelart, web development, swipe gallery, reactjs, typescriptjs, react hooks

Id: lEard9VsxHQ

Length: 40min 13sec (2413 seconds)

Published: Wed Nov 01 2023