1.1.0 • Published 3 years ago

react-native-simple-pop-menu v1.1.0

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

Features:

  • Simple to use popup/context menu
  • Support all in and out Animatable animations
  • Non opinionated and Extremely Customizable
  • Auto position the menu based on the anchor position
  • You provide your own item components
  • You provide your own container component
  • Fully typed with Typescript
LightDark
Pop menu demoPop menu demo

Installation

npm install react-native-simple-pop-menu --save

or

yarn add react-native-simple-pop-menu

Usage

Wrap your application inside PopMenuProvider and then simply use PopMenu component where you need it.

import {
  PopMenu,
  PopMenuItem,
  PopMenuProvider,
} from 'react-native-simple-pop-menu'

const menuItems1: PopMenuItem[] = [
  {
    render: () => <Text>Header</Text>,
  },
  {
    render: () => <Text>Item 1</Text>,
    onPress: () => console.log('item 1 pressed'), // Optional onPress
  },
  // ... more items
]

const App = () => {
  return (
      <PopMenuProvider>
        <View>
          <PopMenu items={menuItems1}>
            <Button>PRESS ME</Button>
          </PopMenu>
        </View>
      </PopMenuProvider>
  )
}

export default App

Advanced Usage

Check the example folder for more advanced usage

Properties

PropDescriptionDefault
itemsArray of PopMenuItem
containerMenu Container (Optional)
triggerMenu Open trigger press or longPresspress
animationInOpening Animation one of AnimatablezoomIn
animationOutClosing Animation one of AnimatablezoomOut