Theo's Typesafe CultTTC
Theo's Typesafe Cult•3y ago•
19 replies
Jim

How do headless-ui expose context variable for child components?

Hey I'm trying to recreate a similar pattern to what is used in headless-ui Menu components.
https://headlessui.com/react/menu
import { Menu } from '@headlessui/react'

function MyDropdown() {
  return (
    <Menu>
      {({ open }) => (
        <>
          <Menu.Button>More</Menu.Button>
          {open && (
            <div>
              <Menu.Items static>
                <Menu.Item>{/* ... */}</Menu.Item>
                {/* ... */}
              </Menu.Items>
            </div>
          )}
        </>
      )}
    </Menu>
  )
}

As you can see open is passable as a variable to be consumed by the children. How can I recreate such a pattern?
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Headless UI
Was this page helpful?