24
loading...
REACT NAVBAR WITH reactstrap
Hello everyone today i am going to show you how to create a collapsible navbar with 'reactstrap', which is just like Bootstrap but with React components.
Few Commands before Diving into the code
npm i reactstrap react-reveal bootstrapFirst we will import the modules required here
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,
NavbarToggler,Nav,
NavItem,NavLink,
Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'Then inside the function we will set the states
const[toggle,setToggle] = useState(false);
const isToggle = () => setToggle(!toggle);
//It is used to toggle the navbar here the initial
//state is set to false which means closed navbar
//isToggle is an arrow function which will change state
//of toggle to true and falseNow inside the return statement we will design the navbar-
<div className="">
<Navbar color="dark" dark style={{alignItems:"flex-start"}}>
<NavbarBrand className="">
<h1 className="mainLogo">Coder Academy</h1>
</NavbarBrand>
<NavbarToggler onClick={isToggle} />
<Collapse isOpen={toggle} navbar>
<Fade left>
<Nav navbar className="text-center display-4"
style={{height:"55%"}}>
<NavItem>
<NavLink>
<p className="navLink">Home</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Resume</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Why us</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">About</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Contact</p>
</NavLink>
</NavItem>
</Nav>
</Fade>
</Collapse>
</Navbar>
</div>ABOUT THE CODE -
*Here we are using the tags instead of using bootstrap classes.
*Inside these tags there are attributes just like html tags.
*Then we did some inline styling to the elements.
*For the logo we have used the NavbarBrand tag.
*For the collapse icon we have used NavbarToggler Tag and inside
it we have attribute onClick which will call the isToggle
function and change the state of toggle to true or false.
it we have attribute onClick which will call the isToggle
function and change the state of toggle to true or false.
*True - Open navbar and False - Closed navbar.
*Inside it we have Collapsed tag with attribute isOpen which have
value toggle, the value of toggle can be changed by NavbarToggler
element.
value toggle, the value of toggle can be changed by NavbarToggler
element.
*inside Collapsed tag we have Fade tag which is an animation tag
element from react-reveal library, on opening the navbar, it will
create a fade effect from left side.
element from react-reveal library, on opening the navbar, it will
create a fade effect from left side.
*Then we created our Navbar inside Copllapsed with NavItem and
inside it NavLink.
inside it NavLink.
Here is the full code -
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,NavbarToggler,Nav,NavItem,NavLink,Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'
function App() {
const[toggle,setToggle] = useState(false);
const isToggle = () => setToggle(!toggle);
return (
<div className="">
<Navbar color="dark" dark style={{alignItems:"flex-start"}}>
<NavbarBrand className="">
<h1 className="mainLogo">Coder Academy</h1>
</NavbarBrand>
<NavbarToggler onClick={isToggle} />
<Collapse isOpen={toggle} navbar>
<Fade left>
<Nav navbar className="text-center display-4" style={{height:"55%"}}>
<NavItem>
<NavLink>
<p className="navLink">Home</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Resume</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Why us</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">About</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Contact</p>
</NavLink>
</NavItem>
</Nav>
</Fade>
</Collapse>
</Navbar>
</div>
)
}
export default AppHere is the Css part -
.navLink{
color: aquamarine;
transition: all 0.5s ease;
}
.navLink:hover{
transform: scale(1.4);
}
.mainLogo{
color: aquamarine;
}Well i am just a newbie here so if You find any mistake please highlight it
THANK YOU FOR READING THIS POST
THANK YOU FOR READING THIS POST
24