multi-tier-menu

A multi-tier select menu component

Install

npm install --save multi-tier-menu

Usage

import { MenuItem, MultiTierMenu } from 'multi-tier-menu';
import 'multi-tier-menu/dist/index.css';
import React, { Component, ReactComponentElement } from 'react';

export default class App extends Component<any> {
    public state = {
        selection: ''
    };

    private menuItems: MenuItem[] = [
        {
            label: 'Default Selection',
            value: 'default',
            description: 'A basic budget to manage your overall spending month to month.',
            separator: true
        },
        {
            label: 'Parent2',
            value: 'Parent2',
            separator: false,
            children: [
                {
                    label: 'Child1',
                    value: 'Child1',
                    separator: false
                },
                {
                    label: 'Child2',
                    value: 'Child2',
                    separator: false
                },
                {
                    label: 'Child3',
                    value: 'Child3',
                    separator: false
                },
                {
                    label: 'Child4',
                    value: 'Child4',
                    separator: false
                },
                {
                    label: 'Child5',
                    value: 'Child5',
                    separator: false
                }
            ]
        },
        {
            label: 'Parent3',
            value: 'Parent3',
            separator: false,
            children: [
                {
                    label: 'Child6',
                    value: 'Child6',
                    separator: false
                },
                {
                    label: 'Child7',
                    value: 'Child7',
                    separator: false
                },
                {
                    label: 'Child8',
                    value: 'Child8',
                    separator: false
                },
                {
                    label: 'Child9',
                    value: 'Child9',
                    separator: false
                },
                {
                    label: 'Child10',
                    value: 'Child10',
                    separator: false
                }
            ]
        },
        {
            label: 'Parent4',
            value: 'Parent1',
            separator: false,
            children: [
                {
                    label: 'Child11',
                    value: 'Child11',
                    separator: false
                },
                {
                    label: 'Child12',
                    value: 'Child12',
                    separator: false
                },
                {
                    label: 'Child13',
                    value: 'Child13',
                    separator: false
                },
                {
                    label: 'Child14',
                    value: 'Child14',
                    separator: false
                },
                {
                    label: 'Child15',
                    value: 'Child15',
                    separator: false
                }
            ]
        },
        {
            label: 'Parent5',
            value: 'Parent5',
            separator: false,
            children: [
                {
                    label: 'Child16',
                    value: 'Child16',
                    separator: false
                },
                {
                    label: 'Child17',
                    value: 'Child17',
                    separator: false
                },
                {
                    label: 'Child18',
                    value: 'Child18',
                    separator: false
                },
                {
                    label: 'Child19',
                    value: 'Child19',
                    separator: false
                },
                {
                    label: 'Child20',
                    value: 'Child20',
                    separator: false
                }
            ]
        }
    ];

    public render(): ReactComponentElement<any> {
        return (
            <div>
                <MultiTierMenu menuItems={this.menuItems}
                               addCallback={(selection: MenuItem) =>
                                   this.setState({ selection: `Adding custom subcategory to ${selection.value}` })}
                               addName="Add custom subcategory"
                               className="customPrefix"
                               bland={false}
                               callback={(item: MenuItem) =>
                                   this.setState({ selection: `${item.value} selected.`})}
                               style={{ position: 'absolute', top: '100px', left: 'calc(50% - 125px)' }}/>
                <h1 style={{ textAlign: 'center', width: '100%'}}>{this.state.selection}</h1>
            </div>
        );
    }
}

Development

Run yarn install && yarn start in the root of the project. Open a second tab, then run cd example/ && yarn install && yarn start.

Styling

Passing a className to the MultiTierMenu will prefix that class to all the main elements, for easier styling.

Themes

Switch from the default to the bland theme by setting the bland prop to true.