Guide on programmatically closing a Bootstrap 5 offcanvas in Next Js

Question

Guide on programmatically closing a Bootstrap 5 offcanvas in Next Js

I have integrated Bootstrap 5 into my NextJs app by installing it using the command: npm install bootstrap and then importing the necessary files into my project via _app.js as shown below:

import 'bootstrap/dist/css/bootstrap.css'

...

useEffect(() => {
    import("bootstrap/dist/js/bootstrap");
}, []);

The issue I am facing is that when I open the offcanvas modal and click a link from there, the offcanvas remains open even after the page changes. How can I programmatically close the offcanvas when the pathname changes and only if the offcanvas is active? Thank you for your help.

Note: I am not using react-bootstrap

reactjs next.js bootstrap-5

Answer 1

Answer №1

Recently I encountered a similar issue, but here is how I managed to resolve it.

Firstly, it appears that the way you are importing bootstrap into your nextjs app may not be correct, but if it's working for you then that's fine. However, I suggest importing bootstrap into your nextjs app like this:

useEffect(() => {
    typeof document !== undefined
      ? require("bootstrap/dist/js/bootstrap")
      : null;
  }, []);

Let's dive straight into creating the solution without making this too lengthy. Firstly, you need to create a custom function to close the offCanvas when clicking on a link.

const topicRef = useRef(null);

const closeOffCanvas = (event) => {
    event.stopPropagation();
    const bootstrap = require("bootstrap/dist/js/bootstrap");

    var myOffcanvas = topicRef.current;
    var bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);

    bsOffcanvas.hide();
  };

Now, create your link in this manner and invoke the function we just created:

<Link href={`/article/18004/close-bootstrap-5-offcanvas-in-next-js`} passHref>
 <a href="#" onClick={closeOffCanvas}>navigate to page then close offCanvas</a>
</Link>

I hope this explanation helps you with your issue.

Answer 2

Recently I encountered a similar issue, but here is how I managed to resolve it.

Firstly, it appears that the way you are importing bootstrap into your nextjs app may not be correct, but if it's working for you then that's fine. However, I suggest importing bootstrap into your nextjs app like this:

useEffect(() => {
    typeof document !== undefined
      ? require("bootstrap/dist/js/bootstrap")
      : null;
  }, []);

Let's dive straight into creating the solution without making this too lengthy. Firstly, you need to create a custom function to close the offCanvas when clicking on a link.

const topicRef = useRef(null);

const closeOffCanvas = (event) => {
    event.stopPropagation();
    const bootstrap = require("bootstrap/dist/js/bootstrap");

    var myOffcanvas = topicRef.current;
    var bsOffcanvas = bootstrap.Offcanvas.getInstance(myOffcanvas);

    bsOffcanvas.hide();
  };

Now, create your link in this manner and invoke the function we just created:

<Link href={`/article/18004/close-bootstrap-5-offcanvas-in-next-js`} passHref>
 <a href="#" onClick={closeOffCanvas}>navigate to page then close offCanvas</a>
</Link>

I hope this explanation helps you with your issue.

Answer 3

Answer №2

After some trial and error, I found a solution that worked for me: I realized that importing individual bootstrap modules instead of all modules was causing the global window.bootstrap object to not be set. To address this issue, I created a file called utility/bootstrap.ts to properly initialize my subset of bootstrap:

import type {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Offcanvas,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
} from 'bootstrap';

export async function initBootstrap(): Promise<void> {
  // Code block 
}

To ensure proper type imports, it is necessary to install @bootstrap/types. Then, in the relevant component (in my case, Next Js' _app.tsx), I initialized bootstrap asynchronously using the utility function:

export default function MyApp({ Component, pageProps }: AppProps) {
  // Code block
}

This approach enabled bootstrap to identify the offcanvas correctly without creating duplicates, as demonstrated below:

export function Header() {
  const offcanvasElRef = useRef<HTMLDivElement>(null);
  // Code block
}

Answer 4

After some trial and error, I found a solution that worked for me: I realized that importing individual bootstrap modules instead of all modules was causing the global window.bootstrap object to not be set. To address this issue, I created a file called utility/bootstrap.ts to properly initialize my subset of bootstrap:

import type {
  Alert,
  Button,
  Carousel,
  Collapse,
  Dropdown,
  Modal,
  Offcanvas,
  Popover,
  ScrollSpy,
  Tab,
  Toast,
  Tooltip,
} from 'bootstrap';

export async function initBootstrap(): Promise<void> {
  // Code block 
}

To ensure proper type imports, it is necessary to install @bootstrap/types. Then, in the relevant component (in my case, Next Js' _app.tsx), I initialized bootstrap asynchronously using the utility function:

export default function MyApp({ Component, pageProps }: AppProps) {
  // Code block
}

This approach enabled bootstrap to identify the offcanvas correctly without creating duplicates, as demonstrated below:

export function Header() {
  const offcanvasElRef = useRef<HTMLDivElement>(null);
  // Code block
}

Answer 5

Answer №3

To add the import, simply follow these steps:

useEffect(() => {
    import("jquery/dist/js/jquery");
  }, []);

Answer 6

To add the import, simply follow these steps:

useEffect(() => {
    import("jquery/dist/js/jquery");
  }, []);

Guide on programmatically closing a Bootstrap 5 offcanvas in Next Js

Answer №1

Answer №2

Answer №3

Similar questions

Having trouble changing a state from a class component to a function component in React

Developing a pop-up feature that triggers upon clicking for a miniature rich text editing

How can you fix the warning message in Next.js that says "Expected server HTML to include a matching <header> within <body>"?

Is it possible to use async in the onChange handler of a React event?

Easiest method for creating a distinct identifier for a form-inputted value in React

Enhance user experience by customizing login functionalities in Meteor using React: Integrate personalized

What is the reason for all the buttons activating the same component instead of triggering separate components for each button?

Efficient method to retrieve my app's version in a React Native environment

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

Guide on implementing lazy loading with data-grid material-ui

Using TypeScript, Material UI introduces a new property to the primary object on the palette

When filtering an array in JavaScript, ensure to display a notification if no items match the criteria

Transform routeParams from string to numerical format

React Native Child Component State Update Issue

Obtain cell information when clicking on a specific field within a material-table

Is it possible to alter the style of a child element using the root component in material UI?

Tips for expanding the count and confirming whether the user is a fan using node.js?

Utilizing lazy loading to import local JSON data in Next.js

Here's a guide on customizing the appearance of the date picker in NativeBase components for React Native by

Create a music player application using the React context API