Version: 3.0.0-next.40


usePopover is a custom hook which helps in mounting any children component in a popover at a position relative to the parent.


import { usePopover } from 'native-base';


Return value#

The usePopover hook returns an object with the following fields:

closePopover : ( function ) Callback function to close the popover.

setPopover: ( function ) Callback function to set the children of the popover.

parentComponentConfig: ( Object ) Object that contains the configurations passed from parent prop to be available to children in popover

Configurations for setPopover#

triggerRef: ref of the parent element of the popover

animationDuration: Time in ms for the popover to open and close

placeOverTriggerElement: (boolean) Whether to place the popover element over parent of not

onClose: (function) Callback for closing the popover

parentComponentConfig: (object) The config which can be passed from parent to children

isKeyboardDismissable: (boolean) Specifies whether popover can be closed using Escape key. Defaults to true