https://github.com/xhmm/react-native-popupmenu
show popup menu programmatically in react-native
https://github.com/xhmm/react-native-popupmenu
react-native
Last synced: 6 months ago
JSON representation
show popup menu programmatically in react-native
- Host: GitHub
- URL: https://github.com/xhmm/react-native-popupmenu
- Owner: XHMM
- License: mit
- Created: 2022-09-15T08:14:52.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-02-12T18:12:09.000Z (over 3 years ago)
- Last Synced: 2024-10-11T21:09:42.843Z (over 1 year ago)
- Topics: react-native
- Language: Java
- Homepage:
- Size: 441 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Native-PopupMenu
Provide a imperative api for showing popup menu
## Why this?
Although there are repos have implemented native popup menu for android ([@react-native-menu/menu](https://github.com/react-native-menu/menu), [react-native-context-menu-view](https://github.com/mpiannucci/react-native-context-menu-view)), they **didn't solve the issue when pressable component as the children of popup menu, pressing will not be triggered**, using api to control showing seems more flexible.
This repo didn't provide ios implementation, because ios doesn't have above issue, but if someone has this requirement, PR or issue is welcome.
## Install
```sh
yarn add @popupmenu/react-native-popup-menu
```
or
```sh
npm i @popupmenu/react-native-popup-menu
```
no linking required when using react-native 0.60+
## Example
```js
import * as React from 'react';
import { useRef } from 'react';
import { Pressable, View, Text } from 'react-native';
import { PopupMenu, showPopupMenu } from '@popupmenu/react-native-popup-menu';
const ContentInPopupMenu = () => {
const popRef = useRef(null);
const anchorRef = useRef(null);
return (
{
console.log('action press:', ev.nativeEvent);
}}
actions={[
{ id: 'eat', title: 'go eating' },
{ id: 'drink', title: 'got drinking' },
]}
style={{
backgroundColor: 'pink',
padding: 10,
}}
>
long press below
{
console.log('long press');
showPopupMenu(popRef, anchorRef);
}}
onPress={() => {
console.log('press can be triggered under PopupMenu');
}}
style={{
width: 300,
padding: 20,
height: 100,
backgroundColor: 'orange',
}}
/>
);
};
```
## API
### PopupMenu
#### props
##### `actions`:
```ts
Array<{ id: string; title: string }>
```
##### `onActionPress`:
```ts
(event: { nativeEvent: { id: string } }) => void;
```
### showPopupMenu
Call this method to programmatically show popup menu
```ts
(
// shoud be the ref of PopupMenu
popupMenuRef: MutableRefObject,
// popup menu will show besides this ref component
anchorRef: MutableRefObject
) => void
```
## License
MIT