offcanvas jquery trigger not working in React

Question

I have included jasny's bootstrap offcanvas menu in a react app. While I can trigger and hide the open menu through console in jasny's example like so:

$('.navmenu').offcanvas('hide')

But doing the same in my react app is throwing error: Uncaught TypeError: $(...).offcanvas is not a function(…)

I am guessing its got something to do with javascript closure. Is there any other way to trigger this?

Answer 1

I ended up having to trigger like this on my page load:

      if(window.innerWidth > 1000)
          document.getElementById('navbar-toggle').click();

Answer 2

How I solved it:

// to show it
let myOffcanvas = new window.bootstrap.Offcanvas(document.getElementById('offcanvasId'))
myOffcanvas.show();

and then

// to hide it
let myOffcanvas = window.bootstrap.Offcanvas.getInstance(document.getElementById('offcanvasId'))
myOffcanvas.hide();