DEV Community: Shahid Ullah Khan

Disabling the Context Menu (Right Click Menu) in Your Web Application: A Simple Guide (React, Vue, Angular, Javascript)

Shahid Ullah Khan — Thu, 22 Jun 2023 11:54:49 +0000

Introduction:

In the world of web development, there may be times when you'd like to limit certain browser functionality for the end-user. One such function is the context menu, better known as the right-click or inspect element feature. While this function is critical during the development and debugging phase, you might want to disable it in your production environment to protect your source code from being easily viewed or copied.

Today, I'm thrilled to introduce a simple and efficient package that can help you achieve this – disable-context-menu.

What is 'disable-context-menu'?

disable-context-menu is a lightweight and easy-to-integrate package that effectively disables the context menu in your web applications. You can use it across various JavaScript frameworks such as React, Vue, Angular, or even vanilla JS applications.

Usage:

To start, import the package into your application's root:

import { disableContextMenu } from 'disable-context-menu';

Next, call the disableContextMenu() function in your applications, preferably when the application is in a production environment. Here's how you can do this:

if (process.env.NODE_ENV === 'production') {
  disableContextMenu();
}

Examples:

Let's explore how to use this library in different JavaScript frameworks:

React:

For a React application, you can add the function to the main entry of your application like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { disableContextMenu } from 'disable-context-menu';
import App from './components/App';

const root = ReactDOM.createRoot(document.getElementById('react-app'));

if (process.env.NODE_ENV !== 'development') {
  disableContextMenu();
}

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Vue:

In Vue, you can call this function in your root entrypoint file:

import { createApp } from 'vue'
import { disableContextMenu } from 'disable-context-menu';

if (process.env.NODE_ENV !== 'development') {
  disableContextMenu();
}

const app = createApp({
  el: '#app'
})

Angular:

In an Angular application, you can add the function to the main bootstrap component:

import { Component, OnInit } from '@angular/core';
import { disableContextMenu } from 'disable-context-menu';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class App implements OnInit {
  constructor() {}

  ngOnInit() {
    disableContextMenu();
  }
}

Conclusion:

The disable-context-menu package is a powerful yet straightforward tool to help you maintain a layer of privacy over your production application's code. By disabling the context menu, you can deter non-technical users from casually inspecting your application's source code. Remember to use this tool judiciously, as some users rely on the context menu for accessibility and other functions.

Thank you for reading! If you have any questions, feel free to leave a comment below.

Easy way to manage multiple git accounts using ssh

Shahid Ullah Khan — Sat, 03 Jul 2021 20:58:53 +0000

If you’re having problems managing different ssh keys for your different git accounts, This article is for you! follow below steps to do it easily.

Requirements: Nodejs, Npm

You will need to install and use npm package called ssh-keyman. (Click here to view docs)

Step 1 — Installation

Run below command to install ssh-keyman package.

$ npm i -g ssh-keyman

Step 2 — Initialisation

Now initialise ssh-keyman using below command

$ ssh-keyman -i

By running above command, this package will setup everything up in your system. It will create a default environment in your system & copy your current ~/.ssh/ content to default environment.

Now let’s assume we‘ve two different repositories from two different github profiles githubx and githuby.

Step 3 — Create environment for your account.

Now let’s create two environments, One for githubx and other for githuby.

$ ssh-keyman -c githubx

Above command will create a profile called githubx in your system.

Similarly, Create another environment for our another github account githuby.

$ ssh-keyman -c githuby

Now we’ve both environments setup for githubx and githuby.

Step 4 — Setup SSH Keys.

Let’s now create ssh key for your githubx account. For that we need to switch to githubx environment.

To switch to githubx environment run:

$ ssh-keyman -s githubx

Now we’re in githubx environment, Let’s generate ssh keys for githubx.

$ ssh-keygen -t rsa

once the key is generated, use that key in your GitHub account, copy contents of ~/.ssh/id_rsa.pub and paste it in github’s ssh key section.

Repeat the above process for githuby account.
I.e

Switch to githuby environment

$ ssh-keyman -s githuby

Generate key for githuby environment.

$ ssh-keygen -t rsa

Similarly login to githuby account in the browser and add the contents of ~/.ssh/id_rsa.pub to github create key’s key section.

Step 5 — Start using and switching.

So, If you want to work in repos from githubx account, simply switch to githubx environment using

$ ssh-keyman -s githubx

Now when ever you push or pull the code from git, keys for githubx will be used.

Similarly if you want to work in repos from githuby account, simply switch to githuby environment using

$ ssh-keyman -s githuby

And when ever you push or pull code from git, keys for githuby will be used.