Create Menu on Right Click in React

A context menu is a type of shortcut menu which opens up on right click and shows list of options. Similarly, we will create menu on right click in react applications.

Create Menu on Right Click in React

class ContextMenu extends React.Component {

    state = {
        visible: false,
    };
    
    componentDidMount() {
        document.addEventListener('contextmenu', this._handleContextMenu);
        document.addEventListener('click', this._handleClick);
        document.addEventListener('scroll', this._handleScroll);
    };

    componentWillUnmount() {
      document.removeEventListener('contextmenu', this._handleContextMenu);
      document.removeEventListener('click', this._handleClick);
      document.removeEventListener('scroll', this._handleScroll);
    }
    
    _handleContextMenu = (event) => {
        event.preventDefault();
        
        this.setState({ visible: true });
        
        const clickX = event.clientX;
        const clickY = event.clientY;
        const screenW = window.innerWidth;
        const screenH = window.innerHeight;
        const rootW = this.root.offsetWidth;
        const rootH = this.root.offsetHeight;
        
        const right = (screenW - clickX) > rootW;
        const left = !right;
        const top = (screenH - clickY) > rootH;
        const bottom = !top;
        
        if (right) {
            this.root.style.left = `${clickX + 5}px`;
        }
        
        if (left) {
            this.root.style.left = `${clickX - rootW - 5}px`;
        }
        
        if (top) {
            this.root.style.top = `${clickY + 5}px`;
        }
        
        if (bottom) {
            this.root.style.top = `${clickY - rootH - 5}px`;
        }
    };

    _handleClick = (event) => {
        const { visible } = this.state;
        const wasOutside = !(event.target.contains === this.root);
        
        if (wasOutside && visible) this.setState({ visible: false, });
    };

    _handleScroll = () => {
        const { visible } = this.state;
        
        if (visible) this.setState({ visible: false, });
    };
    
    render() {
        const { visible } = this.state;
        
        return(visible || null) && 
            <div ref={ref => {this.root = ref}} className="contextMenu">
                <div className="contextMenu--option">React Tutorials</div>               
                <div className="contextMenu--option">PHP Tutorials</div>
                <div className="contextMenu--separator" />
                <div className="contextMenu--option">All Tutorials</div>
            </div>
    };
}

Context Menu CSS in React

Now, add this SCSS or CSS in your .scss file to style the context menu in react.

.contextMenu {
    position: fixed;
    background: white;
    box-shadow: 0px 2px 10px #999999;
    
    &--option {
        padding: 6px 50px 5px 10px;
        min-width: 160px;
        cursor: default;
        font-size: 12px;
        &:hover {
            background: linear-gradient(to top, #555, #333);
            color: white;
        }
        
        &:active {
            color: #e9e9e9;
            background: linear-gradient(to top, #555, #444);
        }
        
        &__disabled {
            color: #999999;
            pointer-events: none;
        }
    }
    
    &--separator {
        width: 100%;
        height: 1px;
        background: #CCCCCC;
        margin: 0 0 0 0;
    }
}

Now, we have Component <ContextMenu /> and we can use this anywhere in our application by just importing it in our class or functional components.