react-animated-menu

    1.0.0 • Public • Published

    react-animated-menu

    Simple primitives to build dynamic menu and list components. ☰

    demo

    Introduction

    You want to build a sidebar for your app's dashboard — maybe create a table of contents for your documentation page. When you click on a link in the sidebar you want to expand the contents.

    You also want to use a simple plug and play API that controls the opening/closing of menus items, lets you control the ease and duration of the menu animation, and allows you flexibility to build your UI however you'd like.

    This approach

    react-animated-menu manages all menu state and user interactions for you so you can simply focus on building your UI.

    It uses a single compound component paired with a render prop to provide maximum flexibility, exposing only props that are valuable for you.

    NOTE: This solution transforms the menu's height property. Typically we should be animating CSS transforms; however, in this particular case, using plain Javascript to transition height is a lot simpler.

    Installation

    Install this module as a dependency using npm or yarn

    npm install --save react-animated-menu
    

    or

    yarn add -D react-animated-menu
    

    Usage

    There are 2 components that this module provides - simply use them like this:

    import DynamicMenu, { MenuItem } from 'react-animated-menu'
     
    export default function Menu() {
      return (
        <aside>
          {/* Wrap the menu in a Higher Ordered Component */}
          <DynamicMenu
            initialOpenIndex={0}
            easeDuration={150}
            numberOfMenusThatCanBeOpenedAtOnce={1}
          >
          
            {/* Each menu toggler and the menu list content must be wrapped by a MenuItem
                render prop - and spreading the prop getters to their respective sections. */}
            <MenuItem>
              {({ isOpen, getToggleProps, getMenuProps, getLinkProps }) => (
                <>
                  <button {...getToggleProps()} isOpen={isOpen}>
                    Dashboard
                  </button>
                  <ul {...getMenuProps()}>
                    {dashboardPaths.map(p => (
                      <li key={p.route}>
                        <Link to={`/${p.route}/`} {...getLinkProps()}>
                          {p.name}
                        </Link>
                      </li>
                    ))}
                  </ul>              
                </>
              )}
            </MenuItem>
            
            {/* Same as above MenuItem! */}
            <MenuItem>
              {({ isOpen, getToggleProps, getMenuProps, getLinkProps }) => (
                <>
                  <button {...getToggleProps()} isOpen={isOpen}>
                    Settings
                  </button>
                  <ul {...getMenuProps()}>
                    {settingPaths.map(p => (
                      <li key={p.route}>
                        <Link to={`/${p.route}/`} {...getLinkProps()}>
                          {p.name}
                        </Link>
                      </li>
                    ))}
                  </ul>              
                </>
              )}
            </MenuItem>
          </DynamicMenu>
        </aside>
      )
    }

    Basic Props

    children

    The nested child elements.

    initialOpenIndex

    number | number[] - defaults to -1 (all menu items closed)

    The initial MenuItem that should be open.

    numberOfMenusThatCanBeOpenedAtOnce

    number - defaults to 1

    The number of menus that can be opened at once. 😀

    easeFn

    (t: number) => number

    An easing function - see https://gist.github.com/gre/1650294 for a list of options.

    easeDuration

    number - defaults to 150 (ms)

    Duration of the menu transition.

    License

    MIT

    Install

    npm i react-animated-menu

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.08 MB

    Total Files

    13

    Last publish

    Collaborators

    • timcchang