0.0.1 • Published 2 years ago

@pgateway/react-native-popup-menu v0.0.1

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
2 years ago

react-native-popup-menu · npm license

Features

PositioningDescription
snap positioningAllows to snap menu to any element's border
stick to center of elementAllows to show menu by the center of element's width
dynamic positioningAllows to add dynamic offsets to base menu position
position constraintsAutomatically applies constraints to never allow to go beyond screen borders. You always will see full menu
AnimationsDescription
Right-to-Left supportNot implemented. See #1

Pure TypeScript material menu component for React Native.

initial-gif example-application-gif

Install

Using npm

npm install "@breeffy/react-native-popup-menu" --save

Using yarn

yarn add "@breeffy/react-native-popup-menu"

Usage

Library versionReact Native versionDescription
0.7.0React Native 0.62.2Shows how to use react-native-popup-menu with Typescript
0.7.0React Native 0.62.2Shows how to use react-native-popup-menu with Javascript
...
export const App = () => {
  let elementRef = React.createRef<View>();
  let menuRef: Menu | null = null;

  const setMenuRef: (instance: Menu | null) => void = (ref) => (menuRef = ref);
  const hideMenu = () => menuRef?.hide();
  const showMenu = () => {
    menuRef?.show(elementRef.current, Position.TOP_LEFT);
  };
  const onPress = () => showMenu();

  return (
    <View
      style={{
        width: '100%',
        height: '100%',
        alignItems: 'center',
        justifyContent: 'center'
      }}
    >
      <ElementToStick ref={elementRef} />
      <Button
        style={{ position: 'absolute', bottom: 64 }}
        title={'Press to show menu'}
        onPress={onPress}
      />
      <Menu ref={setMenuRef}>
        <MenuItem onPress={hideMenu}>Item 1</MenuItem>
        <MenuItem onPress={hideMenu}>Item 2</MenuItem>
        <MenuItem onPress={hideMenu} disabled>
          Item 3
        </MenuItem>
        <MenuDivider />
        <MenuItem onPress={hideMenu}>Item 4</MenuItem>
      </Menu>
    </View>
  );
};

Menu

Properties

namedescriptiontypedefault
childrenComponents rendered in menu (required)Node-
styleMenu style (optional)Style-
onHiddenCallback when menu has become hidden (optional)Function-

Methods

namedescription
show()Shows menu
hide()Hides menu

show method parameters

namedescriptiontypedefault
refReact reference to component (required)Reference-
stickToTo which component border(s) we will stick menu (optional)PositionPosition.TOP_LEFT
extraOffsetAdditional offset to stickTo (optional)Object{ left: 0, top: 0 }
computeOffsetAdditional computed offset to stickTo (optional)Function{ left: 0, top: 0 }

stickTo parameter set relative base position of menu, it is always relative to component.

Position enum values
valuedescription
TOP_LEFTShow the menu at the top left of the component
TOP_RIGHTShow the menu at the top rigth of the component
TOP_CENTERShow the menu at the top center of the component
BOTTOM_LEFTShow the menu at the bottom left of the component
BOTTOM_RIGHTShow the menu at the bottom right of the component
BOTTOM_CENTERShow the menu at the bottom center of the component

extraOffset parameter set additional offset to base position of menu. It's used if you want customize stickTo, adding additional offset. extraOffset is an Object with the following allowed properties.

extraOffset object properties
valuedescriptiontype
topOffset the top edge from menu base positionNumber
bottomOffset the bottom edge from menu base positionNumber
leftOffset the left edge from menu base positionNumber
rightOffset the right edge from menu base positionNumber
NotesExample
extraOffset can have duplicate properties (they all will be applied correctly){ top: 10, top: -5, top: 15 }
extraOffset values can be negative too{ top: 10, top: -5, top: 15 }

computeOffset parameter is a callback function which will be called with position and size of component (computeOffset(left, top, width, height)). It's used if you want to customize stickTo dynamically and your computed offset depends on component position / size (for example to show menu centered you need to know component width).

computeOffset callback parameters
namedescriptiontype
leftposition of component on the horizontal axis (from top left window corner)Number
topposition of component on the vertical axis (from top left window corner)Number
widthwidth of componentNumber
heightheight of componentNumber

computeOffset callback should return Object with the same properties as extraOffset Object.

/* Example of computeOffset return value */
{
  top: 10,
  left: 15,
  bottom: -3,
  right: 15,
  top: 12
}
Notes
You can use extraOffset parameter or computeOffset or both parameters simultaneously. So, the final position of menu is calculated as basePosition + extraOffset + computeOffset(left, top, width, height)

MenuItem

Properties

namedescriptiontypedefault
childrenRendered text (required)String-
disabledDisabled flagBoolfalse
disabledTextColorDisabled text colorString"#BDBDBD"
onPressCalled function on pressFunc-
styleContainer styleStyle-
textStyleText styleStyle-
underlayColorPressed colorString"#E0E0E0"

MenuDivider

Properties

namedescriptiontypedefault
colorLine colorString"rgba(0,0,0,0.12)"