Context Menu in React
Tags: react, reactnative, beginners, tutorial
Published: 2022-03-27 23:08:27

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
```typescript
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.
```css
.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 **&lt;ContextMenu /&gt;** and we can use this anywhere in our application by just importing it in our class or functional components.

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)