multi-tier-menu
TypeScript icon, indicating that this package has built-in type declarations

1.0.16 • Public • Published

multi-tier-menu

A multi-tier select menu component

NPM JavaScript Style Guide

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.

Package Sidebar

Install

npm i multi-tier-menu

Weekly Downloads

5

Version

1.0.16

License

MIT

Unpacked Size

72.8 kB

Total Files

12

Last publish

Collaborators

  • avigold
  • chris2x