JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jakiestfu.com/forrst/context/context.js"></script>
<link rel="stylesheet" href="http://jakiestfu.com/forrst/context/context.standalone.css">
<input type="button" id="attach" value="Attach Contextual Menu">
<input type="button" id="destroy" value="Destroy Contextual Menu">

<div id="box">Right Click Me</div>

CSS

body{
    padding:20px;
}
#box{
    background:#eee;
    border:1px solid #ddd;
    padding:50px;
    color:#999;
    font-family:arial;
    text-align:center;
    margin-top:20px;
    margin-top:200px;
}

JavaScript

context.init();

$(document).on('click', '#attach', function () {
    
    context.attach('#box', [{
        header: 'Event Based'
    }, {
        text: 'Action 1',
        action: function () {
            alert('Clicked Action 1!');
        }
    }, {
        text: 'Action 2',
        action: function () {
            alert('Clicked Action 2');
        }
    }, {
        divider: true
    }, {
        header: 'Some More Shiet'
    }, {
        text: 'Sub Menu',
        subMenu: [{
            header: 'Trill Events Baby!'
        }, {
            text: 'Sub Action 1',
            action: function () {
                alert('Dayumm');
            }
        }, {
            text: 'Sub Action 2',
            action: function () {
                alert('Noice');
            }
        }, {
            href: '#',
            text: 'Mega Sub Menu',
            subMenu: [{
                href: '#',
                text: 'Mega Sub Action 1'
            }, {
                href: '#',
                text: 'Mega Sub Action 55'
            }, {
                href: '#',
                text: 'Mega Sub Action 3'
            }]
        }]
    }, {
        text: 'External Link',
        href: 'http://jakiestfu.com/'
    }, {
        text: 'Action 4'
    }]);
    
    
    
});
$(document).on('click', '#destroy', function () {
    
    context.destroy('#box');
    
});