Okay, let's get back to what we were doing 😅. The keys() method returns a new Array Iterator object that contains the keys for each index in the array.Īnd spreading the array will give us an array. The Array(4) will create an empty array of size 4. You can add this file at the root of your project and add the baseUrl property inside compilerOptions. In order to use that I used jsconfig.json. You can find the function in the source code (not adding any image because it isn't that important. The getImage is a util function that I created in order to get the images based on the index value provided by the map function. We've added ref to its container because we'll be adding the mouse events to all those images. Now, we need to import this into our component and pass the images. We're gonna add some images to show that smooth cursor hover transition.Ĭreated this component which can be reused for displaying the images.

The basic layout of the cursor Adding images to show cursor hover effect Transition on transform is used so that we can increase and reduce the size of the dot and outline based on some mouse events (will soon get to know which one). That's why transition is also used on the opacity property.

Opacity: 1 is used so that later on we can hide and show our cursor based on mouseenter and mouseleave event. This code snippet is used to move both elements in the center. Pointer-events: none so that this element doesn't become a target of the pointer-events. Next, we're gonna add the CSS styling to these elements.Ĭursor: none is added to the universal selector * because we want to hide the default cursor. We also created the ref for these elements so that we can access the DOM elements later on. We're gonna start with writing the JSX(HTML) for cursor dot and cursor outline. If you're looking for the source code then it's available in the video. P.S - No modules were used while writing this code.

How to customize cursor css