Friday, 16 December 2022

Changing Popover internal state - Headless UI

How do i change the internal state of the Popover with a function outside the component: Like the openPopover function i created below.

const openPopover = () => {
    setPopoverOpen(true) // Example..
}

<Popover>
  {({open}: {open: boolean}) => {
    // How do i change the open state here from outside the Popover.

    return (
      <>
        <Popover.Button>
          Test
        </Popover.Button>

        {open && (
          <Popover.Panel static>
            Test
          </Popover.Panel>
        )}   
      </>
    )
  }}
</Popover>


from Changing Popover internal state - Headless UI

No comments:

Post a Comment