Forem: Ab. Karim

Show loading animation with custom hook in react

Ab. Karim — Mon, 06 Mar 2023 20:50:23 +0000

This animation will work with a loading class in body. If the loading class exists on body animation will be shown, if not animation will removed.

In this way we can reduce our import export statement in every file we want to use loading.

We will start our loading animation with style.css file.

note I'm using tailwindcss

body.loading {
  overflow: hidden;
}

body.loading::before {
  content: '';
  background-color: rgba(0, 0, 0, 0.85);
  position: absolute;
  inset: 0;
  z-index: 100;
  @apply backdrop-blur-sm;
}

body.loading::after {
  content: '';
  position: absolute;
  background-image: url('./src/assets/img/load.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: max(3vw, 50px);
  z-index: 101;
  inset: 0;
  @apply animate-spin;
}

First we removed overflow from body on loading to remove scrollbar, cause we don't wanna allow a user to scroll on page loading.

Then we added background black on loading(pseduo element before) class and filled it with window size and some more essestial style.

Then we added a Spin image, assign a top position with z-index and rotating with a animation.

Now create a hook to toggle loading class on body

create a file called useLoading.js

import { useEffect } from 'react';

export default function useLoading(state) {
  useEffect(() => {
    document.body.classList.toggle('loading', state);

    return () => document.body.classList.remove('loading');
  }, [state]);
}

We had exported a function that receives bool to toggle class on body. If true passed class will be added, if false class will be removed.

In useEffect hook we can return a function to crean up our work on component unmount, in this case we are removing loading class from body. So, we don't need to worry about loading state on unmount anymore.

Let's use it

In any component you can use it.

// ... more import
import useLoading from "./useLoading";

export default function App() {
 const [loading, setLoading] = useState(true);
 useLoading(loading);

 useEffect(() => {
  // ... some heavy work
setLoading(false)
 }, [])

 //...

}

We have a loading state we passed it to our useLoading hook. Now we can control our loading with just one line 😮. Yeah just update loading state 😀.

Github
Youtube in Bangla Language

React hook to show notification with Context

Ab. Karim — Wed, 01 Mar 2023 12:49:59 +0000

How to create a custom react hook with context api to show notification dynamically step by step

This code is inspired from Web Dev Simplified's react use context hook video.

We need to create a context file. Im creating a context file src/context/Notification.jsx(I'm using vite and this file contains JSX, so I had to use ".jsx" extension)

Create context

import { createContext } from 'react';

const NotificationContext = createContext();

We need to wrap our code with context's provider, to make this process easy and clean we're going to export a provider component from this context file. It also reduce code complexity to manage state.

import { createContext } from 'react';

const NotificationContext = createContext();

+ export function NotificationContextContainer({ children }) {
+  return (
+    <NotificationContext.Provider>
+     {children}
+    </NotificationContext.Provider>
+  );
+ }

yeah, you're right! something more to do in this file

*Wrap everything in App component with NotificationContextContainer *, it doesn't broke 🪚 anything

+import NotificationContextContainer from "./context/Notification.jsx"

//...

export default function App() {
 //... Your amazing business logic
 return (
+   <NotificationContextContainer>
    //... Some amazing component here
+   </NotificationContextContainer>
 )
}

Now we have do some more work in src/context/Notification.jsx.

We have to create and manage our Notification state. Notification state will be a object. Pass value prop to Provider in order to access in the app.

+import { createContext, useState } from 'react';

const NotificationContext = createContext();

export function NotificationContextContainer({ children }) {
+const [notification, setNotification] = useState({});
 return (
+  <NotificationContext.Provider value={notification}>
    {children}
   </NotificationContext.Provider>
 );
}

** Now it's the time to setup update logic **
We have to create another context to update the state from anywhere in our code and also wrap the App with context. We had already wrapped our App component with NotificationContextContainer and children is the App component here. Let's wrap children with update context's Provider.

import { createContext, useState } from 'react';

const NotificationContext = createContext();
+const NotificationContextUpdate = createContext();

export function NotificationContextContainer({ children }) {
const [notification, setNotification] = useState({});
 return (
  <NotificationContext.Provider value={notification}>
+      <NotificationContextUpdate.Provider>
        {children}
+      </NotificationContextUpdate.Provider>
    </NotificationContext.Provider>
 );
}

Yeah, you are right!
We have to implement update state function and pass to value prop.

import { createContext, useState } from 'react';

const NotificationContext = createContext();
+const NotificationContextUpdate = createContext();

export function NotificationContextContainer({ children }) {
const [notification, setNotification] = useState({});
+const updateNotification = (data) => {
+    setNotification(data);
+};
 return (
  <NotificationContext.Provider value={notification}>
+      <NotificationContextUpdate.Provider value={updateNotification}>
        {children}
      </NotificationContextUpdate.Provider>
    </NotificationContext.Provider>
 );
}

We are already did everything, but if you want you use that context we have to first export the two context from this file separately, then import useContext hook and this exported context and we are ready to use this context 😑

😮 That's requires lots of duplicate code and managing that amount of code is so hard.

*What if we export our own hook? * That's a great idea 💡
let's do that

+import { createContext, useState, createContext } from 'react';

const NotificationContext = createContext();
const NotificationContextUpdate = createContext();

+export function useNotification() {
+  return useContext(NotificationContext);
+}

+export function useNotificationUpdate() {
+  return useContext(NotificationContextUpdate);
+}

export function NotificationContextContainer({ children }) {
const [notification, setNotification] = useState({});
const updateNotification = (data) => {
    setNotification(data);
};
 return (
  <NotificationContext.Provider value={notification}>
      <NotificationContextUpdate.Provider value={updateNotification}>
        {children}
      </NotificationContextUpdate.Provider>
    </NotificationContext.Provider>
 );
}

The useNotification function using the context with useContext hook and returning notification state and the useNotificationUpdate is doing the same and returning updateNotification.

That's all for this context file.

Now, we need a component to show notification.
Let's create a component called Notification.jsx.

import CloseButton from '../components/button/CloseButton';

export default function Notification({ ...props }) {
  const typeMap = {
    warning: {
      bgClass: 'bg-gradient-to-r from-yellow-300 to-yellow-400',
      fgClass: '',
    },
    error: {
      bgClass: 'bg-gradient-to-r from-red-600 to-red-700',
      fgClass: 'text-white',
    },
    info: {
      bgClass: 'bg-gradient-to-r from-blue-500 to-blue-600',
      fgClass: 'text-white',
    },
    default: {
      bgClass: 'bg-gradient-to-l from-green-600 to-emerald-600',
      fgClass: 'text-white',
    },
  };

  const { bgClass, fgClass } = typeMap["info"] || typeMap.default;

  const removeNotification = () => {};

  return (
      <div
        className={`fixed bottom-5 right-5 rounded-md p-2 px-4 shadow-xl max-w-xs lg:max-w-md flex items-center z-50 transition ${bgClass}`}
        {...props}
      >
        <span
          className={`block font-lato leading-5 tracking-wide text-start text-base ${fgClass}`}
        >
          My Test Text
        </span>
        <span className="inline-block p-2" onClick={removeNotification}>
          <CloseButton />
        </span>
      </div>
  );
}

This component render static notification to screen. We have to make it dynamic.

Before that, add this component to App component (main component).

import NotificationContextContainer from "./context/Notification.jsx"
+import Notification from "./component/Notification.jsx"

//...

export default function App() {
 //... Your amazing business logic
 return (
   <NotificationContextContainer>
+   <Notification  />
    //... Some amazing component here
   </NotificationContextContainer>
 )
}

Let's make the Notification Component dynamic. In this case notification state object contains two property type and text.

First import two hooks we created previously. We should return notification components if notification state contains text property.

We imported notification update context to clear notification. On close button click we have to set notification to blank object {}

import CloseButton from '../components/button/CloseButton';
+ import { useNotification, useNotificationUpdate } from '../context/Notification.jsx';

export default function Notification({ ...props }) {
+const notification = useNotification();
+const setNotification = useNotificationUpdate();

  const typeMap = {
    warning: {
      bgClass: 'bg-gradient-to-r from-yellow-300 to-yellow-400',
      fgClass: '',
    },
    error: {
      bgClass: 'bg-gradient-to-r from-red-600 to-red-700',
      fgClass: 'text-white',
    },
    info: {
      bgClass: 'bg-gradient-to-r from-blue-500 to-blue-600',
      fgClass: 'text-white',
    },
    default: {
      bgClass: 'bg-gradient-to-l from-green-600 to-emerald-600',
      fgClass: 'text-white',
    },
  };

+ const { bgClass, fgClass } = typeMap[notification.type] || typeMap.default;

 + const removeNotification = () => setNotification({});

+return Object.keys(notification).length !== 0 &&  (
      <div
        className={`fixed bottom-5 right-5 rounded-md p-2 px-4 shadow-xl max-w-xs lg:max-w-md flex items-center z-50 transition ${bgClass}`}
        {...props}
      >
        <span
          className={`block font-lato leading-5 tracking-wide text-start text-base ${fgClass}`}
        >
+          {notification.text}
        </span>
        <span className="inline-block p-2" onClick={removeNotification}>
          <CloseButton />
        </span>
      </div>
  );
}

How to show a notification
Just use the useNotificationUpdate hook in any component.

import { useNotificationUpdate } from '../context/Notification.jsx';

export default function AnyComponent() {

  const setNotification = useNotificationUpdate();

  return <button type="button" onClick={() => setNotification({type: "success", text: "some useful text here"})}> Show notification </button>
}

Share your thoughts about this 😊

My Github

Apache .htaccess

Ab. Karim — Thu, 01 Dec 2022 21:39:02 +0000

Htaccess file

Htaccess stands for Hypertext Access. It is a configuration file. This file is very handy when a user doesn't have access to the server configuration file. Users are allowed to change the name from .htaccess to something else.

Repository about apache

Change or view access file name

file configurations are located here /etc/apache2/apache2.conf.

//...
# AccessFileName: The name of the file to look for in each directory
# for additional configuration directives.  See also the AllowOverride
# directive.
#
AccessFileName .htaccess

#
# The following lines prevent .htaccess and .htpasswd files from being
# viewed by Web clients.
#
<FilesMatch "^\.ht">
        Require all denied
</FilesMatch>
//...

How to enable

It is possible that rewrite rule is not enabled by default.

1. Enable Apache mod_rewrite module

sudo a2enmod rewrite

2. Enable overwrite in /etc/apache2/apache2.conf. Find <Directory /var/www/> //...Some content</Directory> and set AllowOverride All

//...
<Directory /var/www/>
//...
AllowOverride All
//...
</Directory>
//...

Now restart

How to use

You can use one .htaccess file inside a folder and fortunately, there is no limit. Using multiple .htaccess files in a project is so handy.

Create a .htaccess file
Enable the rewrite engine by writing RewriteEngine On

Comment

Comments are started with #
Example: # This is a comment

RewriteCond

RewriteCond allows executing an action with a condition. It is similar to if in a programming language.
Example: We want to redirect user to a specific page if requested url is not a file and also not a folder

# Turn on rewrite engine
RewriteEngine On
# Is a file?
RewriteCond %{REQUEST_FILENAME} !-f
# Is a folder
RewriteCond %{REQUEST_FILENAME} !-d
# Condition matched
# Redirect to index.php then it will do something with this request
RewriteRule ^(.*)$ /index.php

RewiteRule

RewriteRule is used to rewrite requests.

//...
# Redirect to index.php
RewriteRule ^(.*)$ /index.php

Common use cases

Block directory listing
Redirect users to another location
Force HTTPS
And more...

Example

Redirect any URL to a specific file. In this case, I’m redirecting to index.php. Here, we cannot access a file or folder since we don't use any conditions.

RewriteEngine On
# Redirect all request to index.php file
RewriteRule ^(.+)$ index.php

Note: When we use a .htaccess file in the project root folder to redirect all requests to a specific file (e.g. api.php), and there is no condition. Unfortunately at some point we figure out that, we have a folder called public and users need to access it for files eg: image.img, we can do that by just creating a empty .htaccess file with RewriteEngine On. This file will overwrite all of the previous conditions. Horray, now users can access the public folder https://www.example.com/public.

Text scrolling with css animation

Ab. Karim — Wed, 30 Nov 2022 18:07:51 +0000

The text scrollbar is made with CSS and a little js in order to initiate CSS animation.

repo

My work in summary.

To place the items one after another, I set them to inline-block.Next, I added display flex to the parent and wrapped it with nowrap.Then I use transform's translateX property to push items offscreen.

Items will be move from one side to another side by translateX property and that property is used in css animation.

Speed can be modifed by animation duration. Also has more control.

In js,
I just got the max scroll with of items container.

So, you can imagine here nothing is running repeatedly.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scrollbar</title>
    <link rel="stylesheet" href="./style.css">
    <script src="./script.js" defer></script>
</head>

<body>

    <!-- scrollbar container -->
    <div class="scrollbar-container">

        <!-- scrollbar message -->
        <div class="scrollbar-message-section">
            <span class="scrollbar-message-text">Update</span>
        </div>

        <!-- scrollbar wrapper -->
        <div class="scrollbar-wrapper">

            <!-- Items -->
            <a href="#" class="scrollbar-item">Hey</a>
            <a href="#" class="scrollbar-item">Hello</a>
            <a href="#" class="scrollbar-item">This is a message</a>

            <p class="scrollbar-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. A ullam laborum accusantium, provident
                temporibus optio iusto velit, autem sequi odio est nam soluta ipsa perferendis repellendus quia enim
                laudantium eligendi.</p>

            <a href="#" class="scrollbar-item">Demo link </a>
            <a href="#" class="scrollbar-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae
                omnis pariatur excepturi, deleniti neque doloribus aliquam quia nostrum nemo corporis porro ad modi?
                Cupiditate, laboriosam veniam ab praesentium illum nam.</a>
            <a href="#" class="scrollbar-item">Demo item</a>

        </div>
    </div>

</body>

</html>

CSS

/* ! Variable will be added by javascript */
:root {
  --scrollbar-move-left-start: 100%;
  --scrollbar-move-right-end: 100%;
}

/* Move left animation */
@keyframes scrollbarMoveLeft {
  0% {
    transform: translateX(var(--scrollbar-move-left-start));
  }
  100% {
    transform: translateX(var(--scrollbar-move-left-end));
  }
}

/* Move left animation */
@keyframes scrollbarMoveRight {
  0% {
    transform: translateX(var(--scrollbar-move-right-start));
  }
  100% {
    transform: translateX(var(--scrollbar-move-right-end));
  }
}

/* Main Container */
.scrollbar-container {
  background-color: yellow;
  overflow: hidden;
  position: relative;
}

/* Message section */
.scrollbar-container .scrollbar-message-section {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: auto;
  background-color: red;
  z-index: 10;
}

/* Message text */
.scrollbar-container .scrollbar-message-section .scrollbar-message-text {
  color: white;
  font-size: 2rem;
  font-weight: bolder;
  letter-spacing: 0.2ch;
  padding: 1rem;
}

/* Wrapper */
.scrollbar-container .scrollbar-wrapper {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  flex-direction: row;
  gap: 1rem;
  animation: scrollbarMoveLeft var(--scrollbar-animation-time) infinite linear;
  animation-direction: normal;
  animation-delay: 0;
  animation-play-state: running;
}

/* 
* What happen on hover item
*/
.scrollbar-container .scrollbar-wrapper:hover {
  animation-play-state: paused;
}

/* item */
.scrollbar-container .scrollbar-wrapper .scrollbar-item {
  color: black;
  display: inline-block;
  font-size: 1.3rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1rem;
  white-space: nowrap;
  margin: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  text-decoration: none;
}

JS

/**
 * Generate animation time
 * @param {number} content_width width in px
 * @param {number} speed
 * @return {number} animation seconds
 */
function generateAnimationSeconds(content_width, speed) {
    // Multiply speed by 10
    let modifiedSpeed = parseInt(speed * 100);
    // Generate seconds
    let seconds = Math.round(content_width / modifiedSpeed);
    return seconds;
}

/**
 * Set property on document
 * @param {String} property name
 * @param {*} property value
 */
function setPropertyOnDocument(property_name, property_value) {
    document.documentElement.style.setProperty(property_name, property_value);
}

// Get  wrapper
const scrollbarWrapper = document.querySelector('.scrollbar-wrapper');
// Generate seconds
const animationSeconds = generateAnimationSeconds(scrollbarWrapper.scrollWidth, 0.4);

// Set animation time 
setPropertyOnDocument('--scrollbar-animation-time', `${animationSeconds}s`);
// Set position
setPropertyOnDocument('--scrollbar-move-left-end', `-${scrollbarWrapper.scrollWidth}px`);
setPropertyOnDocument('--scrollbar-move-right-start', `-${scrollbarWrapper.scrollWidth}px`);

In github repo documentation was added to modify scrollbar.
Repo

Github profile
My twitter

HTML element to absolute XPath selector - JavaScript

Ab. Karim — Sat, 19 Nov 2022 19:16:38 +0000

XPath selector is convenient in some situations, including a page that randomly generates a new id and class and many more. Let's see how we can get the full XPath position by using an element.

*we will use the child to parent architecture. *

Create a function that receive an element. We will do all work in this function

function getXPath(element) {
   // Selector
    let selector = '';

  // ... Add code here
}

Get tag name of current element

// Get element tag name 
        const tagName = currentElement.tagName.toLowerCase();

Get parent element

  // Get parent element
        const parentElement = currentElement.parentElement;

Is current element is the only child of parentElement if true then add tag to selector;

 // Count children
        if (parentElement.childElementCount > 1) {

        } else {
            //* Current element has no siblings
            // Append tag to selector
            selector = `/${tagName}${selector}`;
        }

If not the only child get other child and filter elements from these elements, that has the same tagname of current tag

 // Count children
        if (parentElement.childElementCount > 1) {


           // Get children of parent element
            const parentsChildren = [...parentElement.children];
            // Count current tag 
            let tag = [];
            parentsChildren.forEach(child => {
                if (child.tagName.toLowerCase() === tagName) tag.push(child) // Append to tag
            })


        } else {
            //* Current element has no siblings
            // Append tag to selector
            selector = `/${tagName}${selector}`;
        }

Now check, is the current element only of type in parent. If so, add to selector /tagName

 // Count children
        if (parentElement.childElementCount > 1) {

           // ...
          // Is only of type
            if (tag.length === 1) {
                // Append tag to selector
                selector = `/${tagName}${selector}`;
            }


        } else {
            //* Current element has no siblings
            // Append tag to selector
            selector = `/${tagName}${selector}`;
        }

If not then add tag position like /tagName[number]

 // Count children
        if (parentElement.childElementCount > 1) {

           // ...
          // Is only of type
            if (tag.length === 1) {
                // Append tag to selector
                selector = `/${tagName}${selector}`;
            } else {
                // Get position of current element in tag
                const position = tag.indexOf(currentElement) + 1;
                // Append tag to selector
                selector = `/${tagName}[${position}]${selector}`;
            }


        } else {
            //* Current element has no siblings
            // Append tag to selector
            selector = `/${tagName}${selector}`;
        }

Now we need to repeate this method until we found html tag. Add a while loop. And some variable to help

 function getXPath(element) {
    //...

    // Loop handler
    let foundRoot;
    // Element handler
    let currentElement = element;

       // Do action until we reach html element
    do {
        // Get element tag name 
        const tagName = currentElement.tagName.toLowerCase();
// ...

        // Set parent element to current element
        currentElement = parentElement;
        // Is root  
        foundRoot = parentElement.tagName.toLowerCase() === 'html';
        // Finish selector if found root element
        if(foundRoot) selector = `/html${selector}`;
    }
    while (foundRoot === false);

And finally return selector

    // Return selector
    return selector;

Here is the full code. element-to-path.js

/**
 * Get absolute xPath position from dom element
 * xPath position will does not contain any id, class or attribute, etc selector
 * Because, Some page use random id and class. This function should ignore that kind problem, so we're not using any selector
 * 
 * @param {Element} element element to get position
 * @returns {String} xPath string
 */
 function getXPath(element) {
    // Selector
    let selector = '';
    // Loop handler
    let foundRoot;
    // Element handler
    let currentElement = element;

    // Do action until we reach html element
    do {
        // Get element tag name 
        const tagName = currentElement.tagName.toLowerCase();
        // Get parent element
        const parentElement = currentElement.parentElement;

        // Count children
        if (parentElement.childElementCount > 1) {
            // Get children of parent element
            const parentsChildren = [...parentElement.children];
            // Count current tag 
            let tag = [];
            parentsChildren.forEach(child => {
                if (child.tagName.toLowerCase() === tagName) tag.push(child) // Append to tag
            })

            // Is only of type
            if (tag.length === 1) {
                // Append tag to selector
                selector = `/${tagName}${selector}`;
            } else {
                // Get position of current element in tag
                const position = tag.indexOf(currentElement) + 1;
                // Append tag to selector
                selector = `/${tagName}[${position}]${selector}`;
            }

        } else {
            //* Current element has no siblings
            // Append tag to selector
            selector = `/${tagName}${selector}`;
        }

        // Set parent element to current element
        currentElement = parentElement;
        // Is root  
        foundRoot = parentElement.tagName.toLowerCase() === 'html';
        // Finish selector if found root element
        if(foundRoot) selector = `/html${selector}`;
    }
    while (foundRoot === false);

    // Return selector
    return selector;
}

Example

const button = document.querySelector("#main > div:nth-child(27) > a.w3-left.w3-btn");

getXPath(button)

returns

'/html/body/div[7]/div[1]/div[1]/div[4]/a[1]'

To learn more about Xpath https://www.w3schools.com/xml/xpath_intro.asp

My github profile

Please give a feedback, what are you thinking about this? and do you had a better solution?