0

I have a div which I want to always show for long screen devices. For small screen devices, I want to show a button with hamburger menu and slide in the div from left edge of the device screen when the hamburge button is clicked. This is possible out of the box with offcanvas property in bootstrap 5. But, our project uses "bootstrap": "^4.6.0" which does not support offcanvas property.

Our current project uses "react-bootstrap": "^1.4.3" which does not support offcanvas component. However, version react-bootstrap 2.7 does support offcanvas.

Quick googling lead me to many workarounds which achieves the same with jQuery or some JS: example-1, example-2, example-3

Apart from this, I tried this react-offcanvas-menu-component, but it was giving conflicts in npm packages.

Is it possible to achieve the same with bootstrap-4? If not, can I achieve the same result without needing to custom write JS and complex CSS? Or is there some library / npm package which allows to achieve the same?

How should I implement offcanvas menu in react in our project (avoiding any major JS framework like jQuery that follows different paradigm from React's components based paradigm)? Or I am without any solution?

Rnj
  • 1,067
  • 1
  • 8
  • 23
  • This may help https://getbootstrap.com/docs/4.2/examples/offcanvas/# . Looks like it works for narrow widths as you requested. – burkay Dec 26 '22 at 00:06
  • This is the same example as my example-2 link. It also uses jQuery. Cant we do this without jQuery or JS? – Rnj Dec 26 '22 at 06:02
  • Bootstrap 4's documentation says "Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins." Bootstrap 4 depends on jQuery itself. If you're using Bootstrap 4, you already include jQuery. Then why is it a problem? – burkay Dec 26 '22 at 14:47
  • This is actually a react project and i wanted to avoid jQuery or keep its use to minimal as it [breaks apart](https://stackoverflow.com/a/51304632/13782227) from react's component binding paradigm – Rnj Dec 26 '22 at 15:17

0 Answers0