Breaking News: Grepper is joining You.com. Read the official announcement!

navbarContext react

Shirshak Kandel answered on August 26, 2022 Popularity 2/10 Helpfulness 8/10

answer navbarContext react

related navbar context react

navbarContext react

Comment

import React, { createContext, useState, useEffect } from 'react';

export const NavbarContext = createContext();

const NavbarContextProvider = ({ children }) => {
  const [currentSection, setCurrentSection] = useState('home');
  const [isOpen, setIsOpen] = useState(false);
  const [hideNavbar, setHideNavbar] = useState(false);
  const [changeBG, setChangeBg] = useState(false);

  useEffect(() => {
    let prevScrollpos = window.pageYOffset;
    window.onscroll = () => {
      let currentScrollPos = window.pageYOffset;
      if (currentScrollPos > 80) {
        setChangeBg(true);
      } else {
        setChangeBg(false);
      }
      if (prevScrollpos > currentScrollPos) {
        setHideNavbar(false);
      } else {
        setHideNavbar(true);
      }
      prevScrollpos = currentScrollPos;
    };
  }, []);

  const toggleIsOpen = () => {
    setIsOpen(!isOpen);
  };

  return (
    <NavbarContext.Provider
      value={{ currentSection, setCurrentSection, isOpen, toggleIsOpen, hideNavbar, changeBG }}
    >
      {children}
    </NavbarContext.Provider>
  );
};

export default NavbarContextProvider;

//NavbarComponent
const NavbarComponent = ({ navItem, logo }) => {
  const { toggleIsOpen, isOpen, hideNavbar, changeBG } = useContext(NavbarContext);
  const { width } = useWindowSize();

  return (
    <nav
      className={` smallSection fixed  transition duration-100 w-full min-h-[10vh] z-[1000000] pt-4  ${
        hideNavbar ? 'translate-y-[-200px] ' : 'top-0 translate-y-0 '
      }  ${changeBG ? 'faq-question-wrap shadow-lg' : ''}  ${isOpen ? 'bg-black' : ''}`}
    >
)

Popularity 2/10 Helpfulness 8/10 Language javascript

Source: Grepper

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Sep 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

Closely Related Answers

navbar context react

Comment

import React, { createContext, useState } from 'react';

export const NavbarContext = createContext(null);

const NavbarContextProvider = ({ children }) => {
  const [currentSection, setCurrentSection] = useState('home');
  const [isOpen, setIsOpen] = useState(false);

  return <NavbarContext.Provider value={{ currentSection, setCurrentSection, isOpen, setIsOpen }}>{children}</NavbarContext.Provider>;
};

export default NavbarContextProvider;

Popularity 3/10 Helpfulness 7/10 Language javascript

Source: Grepper

Tags: javascript navbar

Link to this answer
Share Copy Link

Contributed on Aug 26 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

navbarContext react

Contents

More Related Answers

navbarContext react

Closely Related Answers

navbar context react

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.