https://github.com/lukehansell/react-popup-menu

https://github.com/lukehansell/react-popup-menu

Last synced: about 1 month ago
JSON representation

• Host: GitHub
• URL: https://github.com/lukehansell/react-popup-menu
• Owner: lukehansell
• Created: 2019-07-22T10:55:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-26T15:50:34.000Z (almost 2 years ago)
• Last Synced: 2023-02-28T00:26:27.427Z (almost 2 years ago)
• Language: TypeScript
• Size: 4.06 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Popup Menu

Controlled popup menu with an anchor element. Clicking outside of the menu or the anchor closes the menu.

## Install

`npm i --save popup-menu`

## How to use it

In order to use this you must render a Container component. Inside that component should be at least one Anchor and a Menu Component. Render the MenuItems to display within the Menu.

### Example

```

import { Container, Anchor, Menu, MenuItem } from 'popup-menu'

export default => (

  

    A Dropdown Menu

    

      Item 1

      Item 2

    

  

)

```

![Example image from the above code]()

### Component Hierarchy

- Container

  - Anchor

  - Menu

    - MenuItem

    - MenuItem

### Functionality

1. If the menu is closed - clicking on an Anchor opens the Menu

2. If the menu is open - clicking on an Anchor closes the Menu

3. Clicking on a MenuItem closes the menu

4. Clicking outside the Container closes the menu

### Potential future functionality

1. Passing `autoClose={false}` to a MenuItem means it does not close the Menu on click

## Component Props

### Container

Responsible for containing the menu and maintaining it's state.

### Anchor

The element used to open a menu.

### Menu

Contains each of the menu items.

### MenuItem

The individual action elements.

-------

## Contributing

Please feel free to submit any PRs or issues to this repo. I'll get to them as soon as I can.

### Running the tests

`npm t`

## Current Maintainers

- Luke Hansell - [Twitter](https://twitter.com/luke_hansell), [GitHub](https://github.com/lukehansell)