How to manually control the Popover Component?

[jkobjacob]

Hi,

Can someone provide me with an example on how to manually control the Popover component?

I'm passing the below function as the child to the Popover as per the documentation.

({toggle, getRef, isShown}) => {
     // toggle() - to toggle the pane
    // isShown - the boolean based on which the pane is shown or not
    // getRef() - what the ref is about?
}

But still i have no clue on how to use these. I tried calling toggle inside the body conditionally based on state of its parent component and i just blowed up the stack.

So, when and how to use these values in the function body? And also if we pass a function as its child, which element is the target around which Popover is positioned?

Thanks!

[mshwery]

The children-as-a-function approach is a means of passing the popover state and functions down to child components. isShown is simply there to read whether or not the popover is shown.

If you use a function, you need to pass getRef as the ref value to the component you want to act as the trigger:

  <Popover content={YourPopoverContent}>
    {({ isShown, toggle, getRef }) => (
      <IconButton
        ref={getRef}
        icon={MoreIcon}
        appearance="minimal"
        isActive={isShown}
        onClick={toggle}
      />
    )}
  </Popover>