https://github.com/leandroberlin/react-navbar-toggler
🥃 Vanilla JS implementation for the Bootstrap Navbar Toggler in React
https://github.com/leandroberlin/react-navbar-toggler
Last synced: 3 months ago
JSON representation
🥃 Vanilla JS implementation for the Bootstrap Navbar Toggler in React
- Host: GitHub
- URL: https://github.com/leandroberlin/react-navbar-toggler
- Owner: LeandroBerlin
- License: mit
- Created: 2020-01-19T20:37:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T06:20:45.000Z (over 2 years ago)
- Last Synced: 2025-01-19T10:08:58.688Z (5 months ago)
- Language: JavaScript
- Homepage: https://react-navbar-toggler.vercel.app/
- Size: 4.72 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Navbar Toggler
A webapp example using:
- React
- React Router
- Bootstrap
with vanilla JS implementation for the Bootstrap Navbar Toggler
[Demo on Zeit](https://react-navbar-toggler.now.sh/)
# The Problem
We installed Bootstrap following the CRA [documentation](https://create-react-app.dev/docs/adding-bootstrap).
We want to use Boostrap's Navbar Toggler without having to install [React-bootstrap](https://react-bootstrap.github.io/), [Reactstrap](https://reactstrap.github.io/) or risking conflit installing JQuery in our React Webapp.
"React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover."
[Integrating with DOM Manipulation Plugins](https://reactjs.org/docs/integrating-with-other-libraries.html)
## The Solution
We can reimplement the Navbar Toggler functionalities in our Navbar.js component
## Setup
Create a React app
`npx create-react-app react-navbar-toggler`
Move into the project directory
`cd react-navbar-toggler`
Install dependencies
`yarn add node-sass bootstrap react-router-dom`
Create your project structure
In your `Navbar.js` class component:
- Create a state in the constructor
```jsx
this.state = { collapsed: true };
```
- Create a function to update the state
```jsx
toggleNavbar = () => {
this.setState(
(prevState) => ({
collapsed: !prevState.collapsed
})
)
}
```
- In the render assign the status to a variable
```jsx
const status = this.state.collapsed ? 'collapsed' : 'show';
```
- Assign the status and the function to your JSX
```jsx
...
```
## Reference
- https://reacttraining.com/react-router/
- https://create-react-app.dev/docs/adding-bootstrap/#using-a-custom-theme
- https://getbootstrap.com/docs/4.0/components/navbar/
Enjoy! 🥃
Berlin 19 Jan 2020