React Infinity Menu

An unlimited deep side menu to help build complex navigations with as menu submenus as necessary.

Dependencies

React

import InfinityMenu from "react-infinity-menu";  
import "react-infinity-menu/src/infinity-menu.css";

class Example extends React.Component {  
    onNodeMouseClick(event, tree, node, level) {
        this.setState({
            tree: tree
        });
    }

    onLeafMouseClick(event, leaf) {
        console.log( leaf.id ); // Prints the leaf id
        console.log( leaf.name ); // Prints the leaf name
    }

    onLeafMouseUp(event, leaf) {
        console.log( leaf.id ); // Prints the leaf id
        console.log( leaf.name ); // Prints the leaf name
    }

    onLeafMouseDown(event, leaf) {
        console.log( leaf.id ); // Prints the leaf id
        console.log( leaf.name ); // Prints the leaf name
    }

    render() {
        return (
            <InfinityMenu
                tree={this.state.tree}
                onNodeMouseClick={this.onNodeMouseClick}
                onLeafMouseClick={this.onLeafMouseClick}/*optional*/
                onLeafMouseDown={this.onLeafMouseDown}/*optional*/
                onLeafMouseUp={this.onLeafMouseUp}/*optional*/
            />
        );
    }
}