Forem: GermaVinsmoke

How to Create a Random Hex Colour Generator in React

GermaVinsmoke — Thu, 16 Sep 2021 09:19:23 +0000

If you’re looking for the source code, then it’s available in the video.

In this, we’re going to see how to create a full-screen hex colour generator that generates colours randomly.

We’ll create a separate component for generating this colour, and name it RandomColor.

useState

It is used to store the generated colour and also to update the colour on a button click. It’ll help us in updating the colour of the page reactively. 😏

getRgb

This function is used to get a random value. The range of this function is 0 to 255 (because RGB ranges from 0 to 255 🧐).
Math.random generates a floating-point value between 0 and 1. On multiplying with n, we will get the value in the range of 0 and n — 1.
But it’ll still be in decimal, so we can use Math.floorto get the floor round-off value.

rgbToHex

This function is used to generate the hex code of the colour based on the three values of red, blue, and green.
We are mapping over these 3 values and applying toString() function over the value. We can provide a radix argument to this function which converts the number as per the base value provided. - Here, we are using 16 which is for hexadecimal numbers because hex code colour is made up of hexadecimal numbers 🧐. Then we are checking whether the length of the result is 1 or more, if it’s 1 then we’re adding 0 in front of it to normalize it.
At last, we’re joining the array and adding a # in front of the generated string.

handleGenerate

This function is called whenever we click on the button. It creates a colour object and then passes those red, blue, and green values to rgbToHex function. The returned value is used to update the colour.

At last, we are setting the colour to the backgroundColor of the container and text color of the button.

The styling part of the application is done like this.

The container class is just to make sure the whole screen area is used and the button is placed in the centre. transition is just to provide a smooth transition of colour whenever a new colour is generated.

Button styling in order to make it look good. transform and box-shadow are used to provide a 3D effect to the button whenever we hover on the button.

And by doing all this we’ll finally have our random full-screen colour generator complete. It’ll look something like this 🤩👇🏻

That’s it, this is where our journey ends. I hope you were able to reach this point. 😃

Thanks!

How to create a custom cursor in React Part — 2 [Mathematical explanation]

GermaVinsmoke — Sat, 19 Jun 2021 13:53:37 +0000

If you’re looking for the source code then it’s available in the video 😉

Please support by watching this video 😢

This article is mainly focused on the mathematical part of the cursor animation (cursor outline). Part 1 of the article was completely related to the code part if you want to see how it is working then you can follow it.

The main part revolves around this function —

The requestAnimationFrame also provides us with a timestamp variable which we can use to see after what time interval our recursive function is being called.

We also need to store the x and y points every time this function is called. So, for that, we can create a function that can store all these 3 properties.

We need to tweak our animateOutline function also in order to get the desired output.

We are pushing the coordinate object inside the coordinates array.

New conditions have been added to stop the requestAnimationFrame function from calling it again. As per the condition, we will call it recursively only till the time cursor outline’s coordinate aren’t equal to the cursor dot’s coordinate.

We will console log when the coordinates become equal. We’ll be using console.table function because provides a nice tabular view of the output.

There are few things which we can conclude from this data —

The difference between the timestamps is almost constant, that is, 16–17ms. If you read this article then you’ll know that it’s simulating 60FPS (1000/60). This 1000ms divided by 60 is equal to 16.67ms.
The data points have a huge difference in the initial phase of the animation but the difference reduces as time increases.

We are adding the new value and the previous value. endX is constant so if we subtract the x from it after every iteration the numerator will keep on decreasing. And eventually it becomes somewhat near to 0.

If we plot x points with respect to timestamp then we will get a graph like this

Somewhat looks like a logarithmic graph and ease-out cubic bezier function. Increases quickly in the initial phase and then the increment rate decreases.

And that’s it, this is how we are able to achieve this smooth ease-out type of transition with the help of javascript. 🤩🥳

How to create a custom cursor in React Part — 1

GermaVinsmoke — Sat, 19 Jun 2021 13:41:19 +0000

P.S — No modules were used while writing this code 😆

If you’re looking for the source code then it’s available in the video 😉

Please support by watching this video 😢

Basic HTML — CSS layout of the cursor

We’re gonna start with writing the JSX(HTML) for cursor dot and cursor outline.

We also created the ref for these elements so that we can access the DOM elements later on.

Next, we’re gonna add the CSS styling to these elements.

cursor: none is added to the universal selector * because we want to hide the default cursor.

pointer-events: none so that this element doesn’t become a target of the pointer-events. MDN pointer-events

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

This code snippet is used to move both elements in the centre.

opacity: 1; is used so that later on we can hide and show our cursor based on mouseenter and mouseleave event. That’s why transition is also used on the opacity property.

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 😉).

It’ll look something like this.

Adding images to show cursor hover effect

We’re gonna add some images to show that smooth cursor hover transition.

Created this <Link /> component which can be reused for displaying the images.

Now, we need to import this into our <Cursor /> component and pass the images.

We’ve added ref to its container because we’ll be adding the mouse events to all those images.

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. You can find the function in the source code (not adding any image because it isn’t that important. Sorry getImage function! 😥).

Bonus Points 🤩

The import statement’s path

In order to use that I used jsconfig.json. You can add this file at the root of your project and add the baseUrl property inside compilerOptions.

The [...Array(4).keys()] code snippet

The Array(4) will create an empty array of size 4.

The keys() method returns a new Array Iterator object that contains the keys for each index in the array.

And spreading the array will give us an array — [0, 1, 2, 3]

Okay, let’s get back to what we were doing 😅.

The final thing is to add a bit of styling to our images container.

And now the final outcome will look something like this —

Adding Animation to our cursor

Finally, the time has come to add the animation to our cursor (poor cursor sitting alone at the centre of the screen 😥).

Adding ref variables

We need to add some more refs to our Cursor component so that we can update the changes.

delay will be used as a factor by which we will change how quickly or slowly the cursor outline should follow the cursor dot. A higher number means slow and vice versa.

cursorVisible will help in toggling the visibility of the cursor.

cursorEnlarged will help in toggling the size of the cursor.

endX is the X-position of the cursor dot. We will be saving the X position of the dot in this variable. It is initialised with window.innerWidth/2 because that’s mid of X-axis.

endY is the Y-position of the cursor dot. We will be saving the Y position of the dot in this variable. The concept is same as endX.

_x is the X-position of the cursor outline. We will be saving the X position of the outline in this variable. It’s initialised with 0 because we want to show movement animation. (The outline coming from the top left corner of the screen to the middle point where the dot is present at the start of the application).

_y is the Y-position of the cursor outline. We will be saving the Y position of the outline in this variable. The concept is same as _x.

requestRef will save an ID returned from one important function (will see it when we add an animation to the cursor outline).

Adding cursor toggle functions

toggleCursorVisibility — If the cursor is visible then we will change the opacity to 1 otherwise we will change it to 0.
toggleCursorSize — If the cursorEnlarged is true then we will decrease the size of the dot and increase the size of the outline. In case of a false, we will change it back to the original size.

Adding over, out, enter, leave mouse events

‘mouseover’ — The mouseover event is fired when the cursor comes on top of the element or its children.

‘mouseout’ — The mouseout event is fired when the cursor is not on top of the element or its children.

‘mouseleave’ — The mouseleave event is fired when we leave the page viewport.

‘mouseenter’ — The mouseenter event is fired when we enter the page viewport.

Now, we can pass mouseOverEvent and mouseOutEvent to our image component.

These functions will be called whenever the mouse cursor comes on top of the image.

Adding mousemove event

The first thing we need to make sure is that our cursor is visible, that’s why we’ve updated the currentVisible and called the toggleCursorVisibility function.

Then, we are taking the current position of the cursor with the help of pageX and pageY. The next step is to update the top and left property of the dot cursor to show it moving around on the page.

P.S — This StackOverflow answer has a very good explanation about the difference between clientX and pageX.

Adding cursor outline animation

This is a special recursive function that we call inside requestAnimationFrame function. In this function, we update the position of cursor outline with respect to the position of cursor dot.

The mathematical explanation for this is present in part 2 of the article.

This article is great to understand how requestAnimationFrame works and why it was created.

Calling all event functions

We can call all our event functions inside useEffect (componentDidMount). At the time of unmounting, we should remove all the event listeners and also cancel the requestAnimationFrame using cancelAnimationFrame function.

And with all these functions, our poor cursor can finally move 🥳

Part 2 of the article is having a little bit of mathematical explanation. So you can check it out if you want to.

Some of the important links —

MDN requestAnimationFrame — https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

StackOverflow answer on requestAnimationFrame — https://stackoverflow.com/questions/52212703/using-requestanimationframe-in-react/52213728

Using requestAnimationFrame in React — https://css-tricks.com/using-requestanimationframe-with-react-hooks/

Using event listeners in React — https://www.pluralsight.com/guides/event-listeners-in-react-components

VanillaJS codepen for custom cursor — https://codepen.io/kjbrum/pen/qooQJJ

How to create a page load animated loader in React

GermaVinsmoke — Sun, 06 Jun 2021 17:11:30 +0000

We’re gonna see how to create an animated loader that comes at the time of page load.
Basically, it’s equivalent to Javascript’s load event. The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

We need to add our loaders HTML and CSS inside the index.html file present inside the public directory.

<div id="root">
  <div class="loader-wrapper">
    <div class="loader"></div>
  </div>
</div>

Since the react app is mounted in root div, so we need to add our loader HTML part inside the root div.
Then, we can add the CSS part inside the same file, inside the <style> tag.

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100%;
    }

    .loader-wrapper {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #0b0b0b;
      display: grid;
      place-items: center;
    }

    .loader {
      border: 16px solid #e3e3e3;
      border-top: 16px solid #3498db;
      border-radius: 50%;
      width: 140px;
      height: 140px;
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

And that’s it, it’ll create a page loader for your react application which will only come up whenever the website is first opened up.

It is quite different from the one which we use in the case of React.lazy and Suspense because in that, it uses the fallback property of Suspense which is visible every time the route of our page changes and it’s a new route.

Source code of the application - react-page-loader