npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-mega-menu

v1.0.1

Published

react-mega-menu React component

Downloads

264

Readme

react-mega-menu

A more natural feeling navigation menu component that can distinguish an option selection and an attempt to navigate to the submenu's content.

favicon-32x32 NPM Version Downloads Stats

The component is used on Supply.com and styled as follows:

Installation

npm install react-mega-menu --save

Examples

The examples from this point on will be style-less except for borders and padding for presentation purposes.

The menu is responsive, going up and down as expected, but when you attempt to point to the content container, it recognizes it and allows for a smooth transition without switching sections accidentally:

The menu can also present the content to the left instead of to the right:

Usage

import the package

import { ReactMegaMenu } from "react-mega-menu" //OR
import ReactMegaMenu from "react-mega-menu"

The component takes in a few props:

{
  tolerance?: number;
  direction?: Directions;
  data: Section[];
  styleConfig: StyleConfig;
  onExit?: () => void;
}

and can be used as follows:

...
<ReactMegaMenu 
  tolerance={50}      // optional, defaults to 100
  direction={"LEFT"}  // optional, defaults to "RIGHT", takes in "RIGHT" || "LEFT"
  styleConfig={...}   // defaults to an empty object. not recommended to be left blank.
  onExit={()=>{...}}  // a function to be called when a mouse leaves the container
  data={[...]}        // array of data to be rendered
/>
...

Data Structure

Each element in the data array should consist of the following properties:

{
  label: string;            // label to be shown on for each menuItem
  key: string | number;     // a key id
  items: React.ReactNode;   // a react node to be presented as content
}

The labels will be presented in the menu and the appropriate items will be presented when the label gets hovered over.

Styling

To style the component, please provide it with a styleConfig prop. This is highly recommended as the styling is close to nonexistent in this component. It is meant to be dynamic and easily fit into your web-app's style.

styleConfig prop consits of the following:

{
  containerProps?: React.HTMLAttributes<HTMLDivElement>;
  contentProps?: React.HTMLAttributes<HTMLDivElement>;
  menuItemProps?: React.HTMLAttributes<HTMLLIElement>;
  menuItemSelectedProps?: React.HTMLAttributes<HTMLLIElement>;
  menuProps?: React.HTMLAttributes<HTMLUListElement>;
}

It is recommended to create a style/className prop for each of those. To better understand what each one of these affects, take a look at the following outline:

Development setup

  1. Clone repo: git clone ...
  2. run npm install
  3. run npm start to see a live demo

Release History

  • 1.0.0
    • initial release

Meta

Baruch-Adi Hen – @_baruchadi[email protected]

Distributed under the MIT license. See LICENSE for more information.

https://github.com/SUPPLYcom
https://github.com/baruchadi

Contributing

  1. Fork it (https://github.com/SUPPLYcom/react-mega-menu/fork)
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request

Inspired by:

https://github.com/kamens/jQuery-menu-aim