Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/instea/react-native-popup-menu

Popup menu component for React Native
https://github.com/instea/react-native-popup-menu

android animation ios popup-menu react-native

Last synced: 2 months ago
JSON representation

Popup menu component for React Native

Lists

README 

        
# react-native-popup-menu

[![](https://img.shields.io/npm/dm/react-native-popup-menu.svg?style=flat-square)](https://www.npmjs.com/package/react-native-popup-menu)



Extensible popup menu component for React Native for Android, iOS and (unofficially) UWP and react-native-web.



Features:

* Simple to use popup/context menu

* Multiple modes: animated, not animated, slide in from bottom or popover

* By default opening and closing animations

* Optional back button handling

* Easy styling

* Customizable on various levels - menu options, positioning, animations

* Can work as controlled as well as uncontrolled component

* Different lifecycle hooks

* RTL layout support



Community driven features:

* Support for UWP, react-native-web and react-native-desktop

* Typescript definitions



We thank our community for maintaining features that goes over our scope.



| Context Menu, Slide-in Menu | Popover |

|---|---|

|![Popup menu demo](./android.demo.gif)|![Popup menu demo](./android.demo-popover.gif)|



## Installation



```

npm install react-native-popup-menu --save

```

If you are using **older RN versions** check our compatibility table.



## Basic Usage

Wrap your application inside `MenuProvider` and then simply use `Menu` component where you need it. Below you can find a simple example.



For more detailed documentation check [API](./doc/api.md).



```js

// your entry point

import { MenuProvider } from 'react-native-popup-menu';



export const App = () => (

  

    

  

);



// somewhere in your app

import {

  Menu,

  MenuOptions,

  MenuOption,

  MenuTrigger,

} from 'react-native-popup-menu';



export const YourComponent = () => (

  

    Hello world!

    

      

      

         alert(`Save`)} text='Save' />

         alert(`Delete`)} >

          Delete

        

         alert(`Not called`)} disabled={true} text='Disabled' />

      

    

  

);



```



## Documentation



- [Examples](doc/examples.md)

- [API](doc/api.md)

- [Extension points](doc/extensions.md)



## Contributing

Contributions are welcome! Just open an issues with any idea or pull-request if it is no-brainer. Make sure all tests and linting rules pass.



## React Native Compatibility

We keep compatibility on best effort basis.



| popup-menu version | min RN (React) version |

| ------------------ | -------------- |

| 0.13               | 0.55 (16.3.1)  |

| 0.9                | 0.40           |

| 0.8                | 0.38           |

| 0.7                | 0.18           |