PopoverAnchor

How to get PopoverAnchor

import { PopoverAnchor } from 'fds/components';

Type: Component

A helper component used to easily position a Popover next to an anchor element. Uses render functions to render both the desired anchor and Popover.

Props

# Name Type Description
1. [isPopoverOpenedInitially] Boolean

Whether or not the popover is opened initially (from its first render). After the first render, whether or not the popover is opened is determined by this component's local state. Changing this prop afterwards won't affect it.


  Default value
false
2. preferredPositionSpec

A position spec that is preferred (tried first) before the normal Popover position spec. Eg. set this to:

[
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_FORWARD },
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_BACKWARD },
  { direction: positioner.DIRECTION_WEST, extension: positioner.EXTENSION_CENTER }
]

to try positioning the popover on the left of the element first (normally that is tried last).


  Default value
[]
3. renderAnchor Function

A callback that is called at render time, used to render an anchor point to trigger a popover from.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
isFocused FDS~IsFocused
isPopoverOpened Boolean

Whether or not the Popover corresponding to the component is opened.

onRef Function

A callback that is called whenever a component's ref changes.

Use this callback to get a ref to (the domNode of) a component. There shouldn't be many usecases for using this prop yourself, but you might have to implement it with a given argument from a render callback somewhere.

For more information about React and "refs", check the React documentation


  Arguments
# Name Type Description
1. domNode HTMLElement

The domNode on which the component placed its ref callback attribute.

  Returns

Type: void

setIsPopoverOpened FDS~SetIsPopoverOpened
togglePopover Function

A function that can be called to toggle the Popover that corresponds to the component.

4. renderPopover Function

A callback that is called at render time, used to render the Popover corresponding to the anchor point.


  Arguments
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
setIsPopoverOpened FDS~SetIsPopoverOpened
Was this page helpful?