Disable Context Menu
This package is used to disable context menu / inspect element / right click in your web applications.
Usage
- First import the package in your application's root.
import { disableContextMenu } from 'disable-context-menu';- Now call disableContextMenu in your applications. e.x
if (process.env.NODE_ENV === 'production') {
disableContextMenu();
}This can be used in react / vue / ember / venilla js applications.
Examples
- React index.js (main entry of your react application) you can use 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 app.js (In your vue applications 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 app.component.ts (main bootstrap component in your application)
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();
}
}