@markdijkstra/react-dropdown v1.0.0

react-dropdown

React dropdown component

How install

npm i @markdijkstra/react-dropdown

npm i react-router-dom
npm i prop-types
npm i feather-icons-react

How to use

import {Dropdown} from '@markdijkstra/react-dropdown'


const MenuData = [
    {
        route: '/profile',
        label: 'Profile',
    },
    {
        route: '/profile/notifications',
        label: 'Notifications',
    },
    {
        route: '/profile/settings',
        label: 'Profile Settings',
    },
    {
        divider: true,        
    },
    {
        route: '/logout',
        label: 'Logout',
    }
];

const OptionsData = [
    {
        allowClickOutside: false,
        closeIcon: 'chevron-up',
        openIcon: 'chevron-down',
        wrapperClass: 'dd__wrapper',
        triggerClass: 'dd__trigger',
        contentClass: 'dd__content'
    }
];

<Dropdown items={MenuData} buttonLabel='John Doe'
          className="dropdown" options={OptionsData}/>

Closed state

<div class="dd__wrapper closed">
    <div class="dd__trigger">
        <span>John Doe</span>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down ">
            <g>
            <polyline points="6 9 12 15 18 9"></polyline>
            </g>
        </svg>
    </div>
</div>

Open state

<div class="dd__wrapper open">
    <div class="dd__trigger">
        <span>John Doe</span>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up">
            <g>
            <polyline points="6 9 12 15 18 9"></polyline>
            </g>
        </svg>
    </div>
    <div class="dd__content">
        <a href="/profile">Profile</a>
        <a href="/profile/notifications">Notifications</a>
        <a href="/profile/settings">Settings</a>        
        <hr>
        <a href="/logout">Logout</a>
    </div>
</div>

Options

Icons

We have used the Feather Icons react component for the icons.