Context Menu

Context Menu Primitive Text Component

Demo

Shows a menu activated by either a right-click or a long-press.

Installation

CLI

npx @react-native-reusables/cli@latest add context-menu

Manual

Dependencies

Before copy/pasting, add the context-menu primitive and the text component to your project.

Copy/paste the following code to ~/components/ui/context-menu.tsx:

Usage

Caution

Requires a <PortalHost /> as the last child of your <Root/> (app/_layout.tsx) component

import { PortalHost } from '~/components/primitives/portal';

function Root() {
  return (
    <>
      <Stack />
      {/* Default Portal Host (one per app) */}
      <PortalHost />
    </>
  );
}

import * as React from 'react';
import { Platform, View } from 'react-native';
import Animated, { FadeIn } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  ContextMenu,
  ContextMenuCheckboxItem,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuLabel,
  ContextMenuRadioGroup,
  ContextMenuRadioItem,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubContent,
  ContextMenuSubTrigger,
  ContextMenuTrigger,
} from '~/components/ui/context-menu';
import { Text } from '~/components/ui/text';

function Example() {
  const [open, setOpen] = React.useState(false);
  const [openSub, setOpenSub] = React.useState(false);
  const insets = useSafeAreaInsets();
  const contentInsets = {
    top: insets.top,
    bottom: insets.bottom,
    left: 12,
    right: 12,
  };
  const [checkboxValue, setCheckboxValue] = React.useState(false);
  const [subCheckboxValue, setSubCheckboxValue] = React.useState(false);
  const [radioValue, setRadioValue] = React.useState('pedro');

  return (
        <ContextMenu
          open={open}
          onOpenChange={(newVal) => {
            setOpen(newVal);
            if (!newVal) {
              setOpenSub(false);
            }
          }}
        >
          <ContextMenuTrigger className='flex h-[150px] w-full max-w-[300px] mx-auto web:cursor-default items-center justify-center rounded-md border border-foreground border-dashed'>
            <Text className='text-foreground text-sm native:text-lg'>
              {Platform.OS === 'web' ? 'Right click here' : 'Long press here'}
            </Text>
          </ContextMenuTrigger>

          <ContextMenuContent align='start' insets={contentInsets} className='w-64 native:w-72'>
            <ContextMenuItem inset>
              <Text>Back</Text>
              <ContextMenuShortcut>⌘[</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem inset disabled>
              <Text>Forward</Text>
              <ContextMenuShortcut>⌘]</ContextMenuShortcut>
            </ContextMenuItem>
            <ContextMenuItem inset>
              <Text>Reload</Text>
              <ContextMenuShortcut>⌘R</ContextMenuShortcut>
            </ContextMenuItem>

            <ContextMenuSub open={openSub} onOpenChange={setOpenSub}>
              <ContextMenuSubTrigger inset>
                <Text>More Tools</Text>
              </ContextMenuSubTrigger>
              <ContextMenuSubContent className='web:w-48 native:mt-1'>
                <Animated.View entering={FadeIn.duration(200)}>
                  <ContextMenuItem>
                    <Text>Save Page As...</Text>
                    <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
                  </ContextMenuItem>
                  <ContextMenuItem>
                    <Text>Create Shortcut...</Text>
                  </ContextMenuItem>

                  <ContextMenuSeparator />
                  <ContextMenuItem>
                    <Text>Developer Tools</Text>
                  </ContextMenuItem>
                </Animated.View>
              </ContextMenuSubContent>
            </ContextMenuSub>

            <ContextMenuSeparator />
            <ContextMenuCheckboxItem
              checked={checkboxValue}
              onCheckedChange={setCheckboxValue}
              closeOnPress={false}
            >
              <Text>Show Bookmarks Bar</Text>
              <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem
              checked={subCheckboxValue}
              onCheckedChange={setSubCheckboxValue}
              closeOnPress={false}
            >
              <Text>Show Full URLs</Text>
            </ContextMenuCheckboxItem>
            <ContextMenuSeparator />
            <ContextMenuRadioGroup value={radioValue} onValueChange={setRadioValue}>
              <ContextMenuLabel inset>People</ContextMenuLabel>
              <ContextMenuSeparator />
              <ContextMenuRadioItem value='pedro' closeOnPress={false}>
                <Text>Elmer Fudd</Text>
              </ContextMenuRadioItem>
              <ContextMenuRadioItem value='colm' closeOnPress={false}>
                <Text>Foghorn Leghorn</Text>
              </ContextMenuRadioItem>
            </ContextMenuRadioGroup>
          </ContextMenuContent>
        </ContextMenu>
  );
}

Props

ContextMenu

Extends View props

Prop	Type	Note
open*	boolean
onOpenChange*	(value: boolean) => void
asChild	boolean	(optional)
relativeTo	’longPress’ | ‘trigger’	Native Only_(optional)_

ContextMenuTrigger

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
inset	boolean	(optional)

ContextMenuPortal

Prop	Type	Note
children*	React.ReactNode
forceMount	true | undefined	(optional)
hostName	string	Web Only (optional)
container	HTMLElement | null | undefined	Web Only (optional)

ContextMenuContent

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
overlayStyle	StyleProp<ViewStyle>	(optional)
overlayClassName	string	(optional)
forceMount	true | undefined	(optional)
alignOffset	number	(optional)
insets	Insets	(optional)
avoidCollisions	boolean	(optional)
align	’start’ | ‘center’ | ‘end’	(optional)
side	’top’ | ‘bottom’	(optional)
sideOffset	number	(optional)
disablePositioningStyle	boolean	Native Only (optional)
loop	boolean	Web Only (optional)
onCloseAutoFocus	(event: Event) => void	Web Only (optional)
onEscapeKeyDown	(event: KeyboardEvent) => void	Web Only (optional)
onPointerDownOutside	(event: PointerDownOutsideEvent) => void	Web Only (optional)
onFocusOutside	(event: FocusOutsideEvent) => void	Web Only (optional)
onInteractOutside	PointerDownOutsideEvent | FocusOutsideEvent	Web Only (optional)
collisionBoundary	Element | null | Array<Element | null>	Web Only (optional)
sticky	’partial’ | ‘always’	Web Only (optional)
hideWhenDetached	boolean	Web Only (optional)

ContextMenuGroup

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

ContextMenuLabel

Extends Text props

Prop	Type	Note
asChild	boolean	(optional)

ContextMenuItem

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
textValue	boolean	(optional)
closeOnPress	boolean	(optional)

ContextMenuCheckboxItem

Extends Pressable props

Prop	Type	Note
checked*	boolean
onCheckedChange*	(value: boolean) => void
textValue*	string
asChild	boolean	(optional)
closeOnPress	boolean	Native Only_(optional)_

ContextMenuRadioGroup

Extends View props

Prop	Type	Note
value*	boolean
onValueChange*	(value: boolean) => void
asChild	boolean	(optional)

ContextMenuRadioItem

Extends Pressable props

Prop	Type	Note
value*	boolean
onCheckedChange*	(value: boolean) => void
asChild	boolean	(optional)
closeOnPress	boolean	Native Only_(optional)_

ContextMenuSeparator

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
decorative	boolean	(optional)

ContextMenuSub

Extends View props

Prop	Type	Note
asChild	boolean	(optional)
open*	boolean
onOpenChange*	(value: boolean) => void

ContextMenuSubTrigger

Extends Pressable props

Prop	Type	Note
textValue	string	(optional)
asChild	boolean	(optional)

ContextMenuSubContent

Extends Pressable props

Prop	Type	Note
asChild	boolean	(optional)
forceMount	true /	undefined

ContextMenuShortcut

Extends Text props