113 lines
2.9 KiB
Markdown
113 lines
2.9 KiB
Markdown
# react-native-popup-menu
|
|
|
|
Popup menu component for React Native.
|
|
It is inspired by [react-native-menu](https://github.com/jaysoo/react-native-menu) component which has some performance limitations.
|
|
Target platforms are both Android and iOS.
|
|
|
|
## Installation
|
|
|
|
```
|
|
npm install instea/react-native-popup-menu --save
|
|
```
|
|
|
|
## Demo
|
|
|
|
|
|
|
|
## Basic Usage
|
|
|
|
```js
|
|
import React, { Text, AppRegistry } from 'react-native';
|
|
import Menu, {
|
|
MenuContext,
|
|
MenuOptions,
|
|
MenuOption,
|
|
MenuTrigger
|
|
} from 'react-native-popup-menu';
|
|
|
|
export const App = () => (
|
|
<MenuContext style={{flexDirection: 'column'}}>
|
|
<Text>Hello world!</Text>
|
|
<Menu onSelect={value => alert(`Selected number: ${value}`)}>
|
|
<MenuTrigger>
|
|
<Text>Select option</Text>
|
|
</MenuTrigger>
|
|
<MenuOptions>
|
|
<MenuOption value={1}>
|
|
<Text>One</Text>
|
|
</MenuOption>
|
|
<MenuOption value={2}>
|
|
<Text>Two</Text>
|
|
</MenuOption>
|
|
</MenuOptions>
|
|
</Menu>
|
|
</MenuContext>
|
|
);
|
|
|
|
AppRegistry.registerComponent('examples', () => App);
|
|
```
|
|
|
|
## API
|
|
|
|
### MenuContext
|
|
|
|
It provides methods to handle popup menus imperatively. The same methods are exposed to the child context with name `menuActions`.
|
|
|
|
#### Methods, `menuActions` context
|
|
|
|
| Method Name | Arguments | Notes
|
|
|---|---|---|
|
|
|`openMenu`|`name`|Opens menu by name|
|
|
|`toggleMenu`|`name`|Toggle menu by name|
|
|
|`closeMenu`||Closes currently opened menu|
|
|
|`isMenuOpen`||Returns `true` if any menu is open|
|
|
|
|
**Note:** It is important that `<MenuContext />` is on the top of the component hierarchy and wrap all `<Menu />` components.
|
|
This is needed in order to solve z-index issues.
|
|
|
|
### Menu
|
|
|
|
Root menu component defining menu name and providing menu events.
|
|
|
|
#### Options
|
|
| Option | Type | Opt/Required | Default | Note |
|
|
|---|---|---|---|---|
|
|
|`name`|`String`|Optional|`auto-generated`|Unique name of menu|
|
|
|
|
#### Events
|
|
| Event Name | Returns | Notes |
|
|
|---|---|---|
|
|
|`onSelect`|`optionValue`|Triggered when menu option is selected.<br>When handler returns `false`, the popup menu remains open|
|
|
|`onOpen`||Triggered when menu is opened|
|
|
|`onClose`||Triggered when menu is closed|
|
|
|
|
### MenuTrigger
|
|
|
|
It defines position where the popup menu will be rendered.
|
|
Menu can by opened by clicking on `<MenuTrigger />` or by calling context methods.
|
|
|
|
#### Options
|
|
| Option | Type | Opt/Required | Default | Note |
|
|
|---|---|---|---|---|
|
|
|`disabled`|`Boolean`|Optional|`false`|Indicates if trigger can be pressed|
|
|
|
|
**Note:** It is necessary that `<MenuTrigger />` is a direct child of `<Menu />`.
|
|
|
|
### MenuOptions
|
|
|
|
This component wrapps all menu options.
|
|
|
|
**Note:** It is necessary that `<MenuOptions />` is a direct child of `<Menu />`.
|
|
|
|
|
|
### MenuOption
|
|
|
|
Wrapper component of menu option.
|
|
|
|
| Option | Type | Opt/Required | Default | Note |
|
|
|---|---|---|---|---|
|
|
|`disabled`|`Boolean`|Optional|`false`|Indicates if option can be pressed|
|
|
|
|
|
|
|