react-flopdown

Flopdown

A simple dropdown component written in React and css.

Installation

npm install --save react-flopdown

Getting Started

react-flopdown ships with three base react components that can flexibly build a dropdown.

• Dropdown: The wrapper component
• DropdownTrigger: The component that will toggle the opening and closing of the dropdown
• DropdownMenu: Contains whatever content that appears when the dropdown is toggled

The DropdownMenu and DropdownTrigger elements are flexible enough to render whatever child elements are passed in.

The dropdown components can be imported using es6 modules

// Individually
import Dropdown from 'react-flopdown';
import DropdownTrigger from 'react-flopodown';
import DropdownMenu from 'react-flopdown';

// Destructuring
import { Dropdown, DropdownTrigger, DropdownMenu } from 'react-flopdown';

Here is an example of a simple dropdown nav menu created using react-flopdown:

import React from 'react';
import { Dropdown, DropdownTrigger, DropdownMenu } from 'react-flopdown';

const ComponentExample = React.createClass({
    render() {
        return (
            <div>
                <h3>Simple Dropdown</h3>
                <Dropdown className={'dropdown'}>
                    <DropdownTrigger className={'dropdown-trigger'}>
                        <p>Click Me</p>
                    </DropdownTrigger>
                    <DropdownMenu className={'dropdown-menu'}>
                        <ul>
                            <li>
                                <a href={'/profile'}>Profile</a>
                            </li>
                            <li>
                                <a href={'/settings'}>Settings</a>
                            </li>
                            <li>
                                <a href={'/my-account'}>My Account</a>
                            </li>
                            <li>
                                <a href={'/log-out'}>Log Out</a>
                            </li>
                        </ul>
                    </DropdownMenu>
                </Dropdown>
            </div>
        );
    }
});

Then add some base styles to your css.

Note: The dropdown won't function properly without these styles.

//Base styles
.dropdown {
    position: relative;

    .dropdown-menu {
        position: absolute;
        display: none;
    }

    .dropdown-menu * {
        display: block;
    }

    &.open {
        .dropdown-menu {
            display: block;
        }
    }
}

Once the styles are included the basic toggling of the dropdown is complete. Feel free to add custom styles as you like or change the names of the classes passed into each component.