Contents

import React, { useState } from 'react'
import {
  Button,
  PbReactPopover,
} from '../..'

const PopoverClickOutside = () => {
  const [showPopover, setShowPopover] = useState(false)

  const handleTogglePopover = () => {
    setShowPopover(!showPopover)
  }

  const handleShouldClosePopover = (shouldClosePopover) => {
    setShowPopover(!shouldClosePopover)
  }

  const popoverTrigger = (
    <Button
        onClick={handleTogglePopover}
        text="Button Secondary"
        variant="secondary"
    />
  )

  return (
    <PbReactPopover
        closeOnClick="outside"
        offset
        placement="bottom"
        reference={popoverTrigger}
        shouldClosePopover={handleShouldClosePopover}
        show={showPopover}
    >
      {'Whoa. I\'m a popover.'}
    </PbReactPopover>
  )
}

export default PopoverClickOutside

Version data entries

23 entries across 23 versions & 1 rubygems

Version	Path
playbook_ui-4.8.1	app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx
playbook_ui-4.7.1	app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx
playbook_ui-4.7.0	app/pb_kits/playbook/pb_popover/docs/_popover_click_outside.jsx