react-native-popup-menu/README.md

2.9 KiB

react-native-popup-menu

Popup menu component for React Native. It is inspired by 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

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.
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