React Data Menu

Hints-based aligning with custom renderers and factories.

Never clipped by other components or screen edges.

View demo View Github

Usage

// ES6
import React, { Component } from 'react';
import { LinkRenderer } from './renderers/LinkRenderer.js';
import { Menu } from 'react-data-menu';

function callback(item) {
    console.log('item clicked', item);
}

export class App extends Component {

    constructor(props) {
        super(props);

        this.state = {
            position: {
                x: 100,
                y: 100
            },
            items: {
                type: 'label',
                title: 'Menu Popup 1'
            }, '-', {
                title: 'Menu item 1-1',
                callback: callback,
                items: [{ // sub-menu
                    title: 'Menu Popup 2'
                }, '-', {
                    title: 'Menu item 2-1',
                    callback: callback,
                    items: [{ // sub-sub-menu
                        title: 'Menu Popup 3'
                    }, '-', {
                        title: 'Menu item 3-1'
                    }]
                }]
            }, {
                title: 'Menu item 1-2'
            }, '-', {
                 type: 'link',
                 title: 'Give me the stars!',
                 url: 'https://github.com/dkozar/react-data-menu/stargazers',
                 target: '_blank'
            }];
        };
    }

    render() {
        var renderers = {
            'link': LinkRenderer
        };
    
        return (
            <Menu items={this.state.items} position={this.state.position} renderers={renderers} />
        );
    }
}

render(<App />, document.body);
Js

Installation

Option A - use it as NPM plugin:

npm install react-data-menu --save
Bash

This will install the package into the node_modules folder of your project.

Option B - download the project source:

git clone https://github.com/dkozar/react-data-menu.git
cd react-data-menu
npm install
Bash

npm install will install all the dependencies (and their dependencies) into the node_modules folder.

Then, you should run one of the builds.

Builds

Hot-loader development build

npm start
open http://localhost:3000
Bash

This will give you the build that will partially update the browser via webpack whenever you save the edited source file.

Additionally, it will keep the React component state intact.

For more info on React hot-loader, take a look into this fantastic video.

Demo build

npm run demo
Bash

This should build the minified demo folder (it's how the demo is built).

npm run debug
Bash

This should build the non-minified demo folder (for easier debugging).

You could install the http-server for running demo builds in the browser:

npm install http-server
http-server
Bash

Additional builds

npm run build
Bash

Runs Babel on source files (converting ES6 and React to JS) and puts them into the build folder.

npm run dist
Bash

Builds the webpackUniversalModuleDefinition and puts it into the dist folder.

npm run all
Bash

Runs all the builds: build + dist + demo.

npm run test
Bash

Runs the tests.

GitHub

dkozar/react-data-menu

10621

Smart data-driven menu rendered in an overlay — Read More

Latest commit to the master branch on 12-7-2022
Download as zip