Forem: Shubham

How to create a custom dialog in React to show before user leave

Shubham — Fri, 01 Jan 2021 12:06:37 +0000

Hello there, Today I am going to show a little trick in React that how you can create your custom own dialog to ask the user before they switch route(instead of native one) when some value required some action (for ex: to save that form, to do some action based on that change)

How it comes?

I was assigned one module where I have to prompt custom dialog when user have something changed into there form and they try to leave the site without saving those changes.

My findings

To be honest, Initially, I thought it might be easy to do as it is a simple dialog and just has to maintain some state to show/hide prompt. But the issue came when I have to track route changes also. After searching google I came to know about this but since we had a requirement to show the custom dialog. Since onBeforeUnload won't allow customizing its dialog(you can only change text string). After exploring not exact solution I have found that some packages are doing this.
But we(my team) don't want to use any third-party library for that. So I got the chance to research that.

Solution

After exploring more on google and StackOverflow came to know about react-router provide history prop which can be utilized for that requirement. Then I started trying implementing it after going through their docs. And it was easy as I thought.
So basically you need to follow these steps to do that:

Create your dialog component
From wherever you want to block your route. Use history.block on the component mount (This will block your navigation)

  componentDidMount(){
    const {history} = this.props;
    this.unblock = history.block(tx => {
      // Navigation was blocked! Let's show a confirmation dialog
      // so the user can decide if they actually want to navigate
      // away and discard changes they've made in the current page.
      this.url = tx.location.pathname;
    });
  }

Since history.block gives you a callback that means you can unblock navigation by executing that

    mySomeRandomFunction(){
      const {history} = this.props;
      this.unblock(); //If condition is satisfied
    }

So once criteria are satisfied unblock that route. That's it you have to do only that

Last but not the least (DEMO)

Caveat

According to history documentation:

history.block will call your callback for all in-page navigation attempts, but
for navigation that reloads the page (e.g. the refresh button or a link that
doesn't use history.push) it registers a beforeunload
handler
to prevent the navigation. In modern browsers you are not able to customize this
dialog

Keep above thing in mind i.e it wont work if page is reload it only work if you try to change some action in page

How to automate image compression with Git Hooks

Shubham — Sat, 12 Sep 2020 17:06:07 +0000

This story is a kind of story and tutorial mix. It consists of the following parts:

Why do we need to compress images?
What leads to me this?
How I did it?

So without delay let’s get started. WHY WHAT AND HOW :-)

Why do we need to compress images?

This tutorial is not about why we need to compress images. There are already a ton of good resources over the internet of this. In summary:

Large images slow down your web pages which creates a bad user experience. (no one wants to wait)
Large image files slow down your site and search engine hates slow sites(it leads to bad SEO)
Large images required high bandwidth
Uncompressed images bloat your pages with unnecessary bytes

That’s it there is a lot more information about this. But there is no point in explaining here. You can find all this information on this internet.

What leads to me this?

Whenever I am doing my personal project or in my organization. I need to organize my images and have to go to manually some compressing site and then convert it into a compressed one and replaced. My lead asked me one day why don’t we automate this stuff. I don’t find any good source or anything to automate this. So I thought It’s worth sharing also.

Note: There are already 3^rd party services that done this for you. But again you have to buy that service. This tutorial is all about automating compression using hooks and for smaller project you dont want your project to blot another 3^rd party service.

How I did it?

This is the interesting part. Let’s start it. Initially the images size is this:

Note: I took this image for demo purpose only

So for automating this stuff I use husky(for git hooks) and lint-staged.

Husky is a good npm package for using git hooks in a better way.
lint-staged is a linter that runs for your staging file (it's like a code you want to run for staging file like beautifying your code, check unused code or malicious code, etc.)

For compression of images I use sharp (it’s open-source). If you have this question why this package why not other packages there are so many good packages. I totally agree with this. But all this question is already answered sharp.

You can check its performance guide. It’s already giving the answer to those questions.

Code time:

So logic is that before committing to the code check of images and if images find then compress them before committing.
You can do other things (like post commit, pre build etc).

Here is complete code:

{
  "hooks": {
    "pre-commit": "lint-staged"
  }
}

/**
  A precommit script to compress image before commiting file
  Q: Why Sharp package used?
  A: https://sharp.pixelplumbing.com/performance

 */

const fs = require("fs");
const sharp = require("sharp");//https://sharp.pixelplumbing.com/

/*
Function: Update existing file to new compress file
 */
const minifyFile = filename => {
  new Promise((resolve, reject) => {
    /*Read upcomimg file*/
    fs.readFile(filename, function(err, sourceData) {
      if (err) throw err;
      /*If file buffer data is present convert it into new compressed file*/
      sharp(sourceData).toFile(filename, (err, info) => {
        err ? reject(err) : resolve();
      });
    });
  });
};

/*
Fetch images maps from args and compress all.
Compressing is asynchronuous process.
So wait for all image to compress and return.
*/
Promise.resolve(process.argv)/*Find more. here: https://nodejs.org/en/knowledge/command-line/how-to-parse-command-line-arguments/*/
  .then(x => x.slice(2))
  .then(x => x.map(minifyFile))
  .then(x => Promise.all(x))
  .catch(e => {
    process.exit(1);
  });

{
  "name": "image-compression",
  "version": "1.0.0",
  "description": "Pre commit script to compress images",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": {
    "name": "Shubham Verma"
  },
  "license": "ISC",
  "devDependencies": {
    "husky": "^4.2.5",
    "lint-staged": "^10.2.7",
    "sharp": "^0.25.3"
  },
  "lint-staged": {
    "*.{png,jpeg,jpg,gif,svg}": [
      "node ./compress-image.js"
    ]
  }
}

I already explained everything in code. Feel free to reach me out.

Last but not least proof ;-)

That’s all folks. Feel free to ask a question if you find any doubt. The complete code is available on Github. Feel free to checkout

You can reach me at twitter @shubham2133

Formatting date phrases becomes easy in javascript

Shubham — Sun, 30 Aug 2020 16:19:53 +0000

Modern web applications often use phrases like “yesterday”, “42 seconds ago”, or “in 3 months” instead of full dates and timestamps. There is no direct solution given by javascript until now. You have to write manually function which is cumbersome in itself or rely on any third party library like moment.js etc. But you don't have to rely on any third party library to achieve this.

The brand new Intl.RelativeTimeFormat API shifts that burden to the JavaScript engine, which can ship the locale data and make it directly available to JavaScript developers. Intl.RelativeTimeFormat enables localized formatting of relative times without sacrificing performance.

These are some examples to get you better idea :-)

Not only this you can convert these into your native language. For example :

That’s all from my side. Congrats yourself for learning new thing. You can explore more on mdn docs.

Understanding Formik hooks with use case(complex)

Shubham — Sun, 31 May 2020 16:46:47 +0000

I was working on typical general problem thought worth to share. I am sure if you are working on forms using Formik so you come to this problem definitely. In this article I am sharing via Formik hooks. So I came to know Formik hooks they are amazing :-)

Problem Statement

Problem Statement

As diagram is self explanatory. I would like to explain if you don’t understand. Considering your manager/ designer or whoever ask you to create a form with some design where you have to create Form with accordion i.e Different form can generated based on which accordion we selected. For simplicity I am explaining for one But it can work for for anyone. How we can submit the form by clicking the submit button? And we need to send the value of form which we selected. Hope you got the context. Let’s start !

After going through google and documentation what take my interest is Formik hook it make this thing very simple. Lets understand

Formik hook initialise

In above code we are doing:

Initialising form variable
Assigning what to do when form is submit(onSubmit)
Last but not least assigning useFormik reference to formik variable

Now we can use this formik variable to do anything we want(like validation from parent or child component or submitting from parent or child component). Note : You can do more things from this variable.

Example:

Compelete code

If you don’t understand from above snippet. Its okay. Here you can find live link and you can tinker around with it. I have added all the comments to make things easier for you. If you still don’t understand you can ask in comment section. That’s all for today guys.

Demo of this code hosted here. Feel free to check out.

Thanx for making it to the end!

If you like this article consider buying me a coffee . Cheers!