I've installed Reactstrap on a project using the NextJS TypeScript install. I've copied the Navbar example from the Reactstrap docs. The navigation shows fine, but on mobile when I click the Navbar toggle, the toggle menu does not open. In fact, no JavaScript components from Reactstrap worked. I've tried modals as well, they don't work either.
Aside from the JavaScript not working when using the Reactstrap components, the Reactstrap CSS styles work completely fine.
Link to live project codesandbox to test.
Code for the Navbar specifically below:
import Link from "next/link";
import {
NavbarBrand,
NavbarToggler,
Collapse,
NavItem,
NavLink,
Nav,
Navbar,
} from "reactstrap";
import styles from "./Navigation.module.scss";
const Navigation = () => {
return (
<div className={styles.nav}>
<Navbar expand="md">
<NavbarBrand href="/">Premium Delivery</NavbarBrand>
<NavbarToggler onClick={function noRefCheck() {}} />
<Collapse navbar>
<Nav className="ms-auto" navbar>
<NavItem>
<NavLink>
<Link href="/">Home</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/services">Services</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/service-fees">Service Fees</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/about">About</Link>
</NavLink>
</NavItem>
<NavItem>
<NavLink>
<Link href="/contact">Contact</Link>
</NavLink>
</NavItem>
</Nav>
</Collapse>
</Navbar>
</div>
);
};
export default Navigation;
I don't know why, but their documentation on the Storybook puts the function noRefCheck() as a placeholder. You are meant to create your own function to activate the Reactstrap code as described in their Github examples:
https://github.com/reactstrap/reactstrap/blob/master/stories/examples/NavbarToggler.js
First, import useState so we can use the hook.
import { useState } from 'react';
Somewhere before the return, add a hook like
const [isOpen, setIsOpen] = useState(false);
Next, for the NavbarToggle, add the hook to the Event
<NavbarToggler onClick={() => { setIsOpen(!isOpen) }} />
Finally, ensure that the Collapse has the correct state
<Collapse isOpen={isOpen} navbar>
Navbar Contents
</Collapse>