The `useNavbarContext` hook does not work as expected

[jamesrweb]

Describe the bug Using the useNavbarContext hook does not work even in child components.

To Reproduce Render a Navbar and try to use the useNavbarContext hook in a child component to get and set the state.

Expected behavior Setting the state works as expected.

Screenshots Since the provider is in the Navbar itself, child components should be able to use it but this is thrown instead:

System information:

N / A

Project information:

• Tailwind: 3.2.7
• Flowbite: 1.6.4
• Flowbite React: 0.4.2
• Type: NextJS 13 App

Additional context Add any other context about the problem here.

[jamesrweb]

Note: I also tried using state to set the value but it also does not work:

export function Navigation() {
  const [open, setOpen] = useState(false);

  return (
    <Navbar fluid menuOpen={open}>
      <Navbar.Brand href="/">
        <Image src="/logo.svg" alt="Logo" priority width={64} height={64} />
      </Navbar.Brand>
      <div className="flex md:order-2 gap-2">
        <Link
          href="/"
          className="bg-black text-white px-4 py-2 rounded-xl"
        >
          Link text
        </Link>
        <NavbarToggle open={open} onToggle={() => setOpen((open) => !open)} />
      </div>
      <Navbar.Collapse>
        <NavbarLinks onLinkClick={() => setOpen(() => false)} />
      </Navbar.Collapse>
    </Navbar>
  );
}

Also note that NavbarToggle just wraps Navbar.Toggle and likewise NavbarLinks just wraps a list of Navbar.Link elements. When state is set, the nabber component does not react at all and just stays collapsed when toggled since the toggle does not accept an on click handler being passed in and thus never changes the state when one is provided...

[tulup-conner]

You say that you are trying to use useNavbarContext explicitly to change things, but I don't see that in your code snippet. Are you just encountering this error by accident, or are you actually trying to call that context?

You aren't supposed to do that, which is the reason it's not documented anywhere that you can, and also the reason why I added the error message.

I guess I'm just confused. You are correctly stating that Navbar.Toggle doesn't accept an event handler, but attempt to use it as if it does anyway, and are not understanding why that isn't working? It feels like I'm missing something here.

Anyway, using the context yourself is not intended to be supported behavior. I suppose we could make that clearer by changing the error message to just say, don't use this at all. By inside child components, what is being referred to is the flowbite-react components themselves in the library, not your own calls to them in your app. That isn't a limitation of the library, it's just how React structures its tree.

What exactly are you trying to do here, in general? It seems like we're just heading down the wrong path but I'm sure there's a solution to what you want to accomplish.

[jamesrweb]

The hook is used in the NavbarToggle and NavbarLinks components. Apologies if that was unclear. The code sample was merely showing the prop change on the Navbar itself also does not actually do anything.

I need to programmatically close or open the navbar, this is exactly what such contexts are for in React and thus I aimed to use it.

It's also useful because the open state is available via the context for conditional styling or analytics calls to be sent.

The prop on the Navbar component itself to mark the nav as open doesn't work when the Boolean is toggled either. Plus, even if it did, manually reimplementing the logic the context already provides is underwhelming to say the least.

I expect any prop provided works and the context actually reacts otherwise neither should be in the public API.

Is that clearer? ☺️

[rluders]

Thank you for reporting this issue. However, we regret to inform you that we won't be able to address it for the following reasons:

• The reported issue refers to an unsupported old version of our project.
• Our team was unable to reproduce the problem with the information provided.
• Insufficient information was provided to conduct a thorough investigation.

We recommend upgrading to the latest version and submitting a new issue if the problem persists. Thank you for your understanding.

[KennyAtCodin]

@jamesrweb were you able to solve this issue?

[jamesrweb]

@KennyAtCodin I gave up on it and implemented a different UI library in the end due to this issue and some other issues with typography, etc.

[zurcacielos]

@rluders there is a Navbar, perhaps it helps, we are talking about next.js, the most important framework of react, the official recommended framework, in which the Link from next/link is the most important navigation feature, it prefetches pages etc. Now... I can't close the navbar if I use as={Link} where Link is from next/link. <Link active={pathname == "/privacy"} href="/privacy" as={Link}>

Privacy Policy

if I try to use the navbarcontext to do something like: const { isOpen, setIsOpen } = useNavbarContext();

<Link active={pathname == "/privacy"} href="/privacy" onClick={()=>setIsOpen(true)>

I receive the same error reported. In which context is useNavbarContext valid or used? google gives 2 results.

[ogheneovo12]

@rluders in summary, there is no way to manually toggle the navbar collapse outside of Navbar.Toggle, which kind of sucks, and feels like a limitation. there are multiple use cases where one might need to toggle the collapse (close), without direct interaction with the Navbar.Toggle component