CODEWITHSUNDEEP
reactjsheadless-ui
Taylor Stocks
Taylor Stocks

Reputation: 167

HeadlessUI state/event management for the wider component

I have a header in React using a Headless UI popover to create a bigger dropdown list. When this is open, the rest of the navigation sits on top and generally looks ok, but i have a 'contrasted' button which is white when it's closed and white when it's opened (no change).

Is there a way I can tell if the headless popover is open or not? The element in question sits outside the popover as it's a part of the higher navigation and outside the scope of the popover.

Before: enter image description here After: enter image description here

I can't find anything on the HeadlessUI docs referencing this, there is an open and closed parameter offered inside on the slot, could it be that I somehow hook onto this?

It's almost like there should be an event that's triggered when the state changes but I can't see anything like this.

Upvotes: 0

Views: 328

Answers (1)

Taylor Stocks
Taylor Stocks

Reputation: 167

Using Headless UI's 'render props' it's actually quite easy to hook onto these.

I've implemented the following:

<Popover>
  {({ open }) => {
    checkIfOpen(open)
    return ()
  }}
</Popover>

I had tried to do the setState straight away in this but it returned an error due to it not being able to be updated/re-rendered this way. I've had to then create a method which checks the open prop and sets the state here

const checkIfOpen = (open) => {
  setIsOpen(open);
};

https://headlessui.com/react/popover#using-render-props

Upvotes: 0

Related Questions