Modify Navbar Color based on State using Styled Components

Question

Modify Navbar Color based on State using Styled Components

I am looking to update the navbar color upon scrolling using the useState hook.

const Navbar = () => {

    const [colorChange, setColorchange] = useState(false);

    const changeNavbarColor = () =>{
       if(window.scrollY >= 38){
         setColorchange(true);
       }
       else{
         setColorchange(false);
       }
    };

    console.log(setColorchange)

    window.addEventListener('scroll', changeNavbarColor);

I need help figuring out how to control the background property of the styled component below using state.

const NavbarContainer = styled.div`
    width: 100%;
    height: 38px;
    background-color: red;
    margin-top: 10px;

    display: flex;
    justify-content: space-between;
    position: sticky;
    top:0;
    z-index: 1;
`;

javascript css reactjs

Answer 1

Answer №1

Passing props is a useful feature:


<HeaderWrapper background={selectedColor}>
 ...
</HeaderWrapper>

const HeaderWrapper = styled.div`
    background-color: ${props => props.background};
    // Feel free to include dynamic javascript logic, such as:
    color: ${({background}) => background === 'light' ? 'black' : 'white'}
`;

Answer 2

Passing props is a useful feature:


<HeaderWrapper background={selectedColor}>
 ...
</HeaderWrapper>

const HeaderWrapper = styled.div`
    background-color: ${props => props.background};
    // Feel free to include dynamic javascript logic, such as:
    color: ${({background}) => background === 'light' ? 'black' : 'white'}
`;

Answer 3

Answer №2

const HeaderBar = styled.div`
    width: 100%;
    height: 36px;
    background-color: ${props => props.colorChange ? "green" : "yellow"};
    margin-top: 12px;

    display: flex;
    justify-content: space-around;
    position: fixed;
    top:0;
    z-index: 2;
`;

Answer 4

const HeaderBar = styled.div`
    width: 100%;
    height: 36px;
    background-color: ${props => props.colorChange ? "green" : "yellow"};
    margin-top: 12px;

    display: flex;
    justify-content: space-around;
    position: fixed;
    top:0;
    z-index: 2;
`;

Answer 5

Answer №3

In my opinion, a great approach is to dynamically update the className of your component based on its current state. Additionally, it's important to initialize your event listener within the useEffect hook and remove it when the component is unmounted.

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

const Navbar = () => {
    const [colorChange, setColorchange] = useState(false);

    const changeNavbarColor = () => {
       if(window.scrollY >= 38){
         setColorchange(true);
       }
       else{
         setColorchange(false);
       }
    };

    useEffect(() => {
        window.addEventListener('scroll', changeNavbarColor);
        return () => {
            window.removeEventListener('scroll', changeNavbarColor);
        }
    }, [])
    
    return (
        <div className={colorChange ? 'colorBlack' : 'colorWhite'}>
            <p>Your navbar</p>
        </div>
    )
}

export default Navbar;

Answer 6

In my opinion, a great approach is to dynamically update the className of your component based on its current state. Additionally, it's important to initialize your event listener within the useEffect hook and remove it when the component is unmounted.

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

const Navbar = () => {
    const [colorChange, setColorchange] = useState(false);

    const changeNavbarColor = () => {
       if(window.scrollY >= 38){
         setColorchange(true);
       }
       else{
         setColorchange(false);
       }
    };

    useEffect(() => {
        window.addEventListener('scroll', changeNavbarColor);
        return () => {
            window.removeEventListener('scroll', changeNavbarColor);
        }
    }, [])
    
    return (
        <div className={colorChange ? 'colorBlack' : 'colorWhite'}>
            <p>Your navbar</p>
        </div>
    )
}

export default Navbar;

Modify Navbar Color based on State using Styled Components

Answer №1

Answer №2

Answer №3

Similar questions

Workbox background sync - Retrieving replayed API responses

Tips for mastering the PrimeFaces JavaScript API

Communication between React.js and Node.js in VS Code

Mouseover feature for image is functioning, but having issues with alignment

In Javascript, determine the root cause of a boolean expression failing by logging the culprit

What steps can be taken to allow for the addition of multiple slick sliders using the same class on a single page?

Efficient Ways to Present and Personalize Indian Date and Time using JavaScript

The scrolling element mirrors the movement of the scrolling window

Exploring the elements within array structures

What is the method for overlaying an image and having it expand to fit the parent container using flexbox?

The like count displayed in Django's AJAX feature is identical for every post

Error displayed inline

The animation function occasionally halts unexpectedly at a varying position

Struggling with Conditional rendering in React JS - Need help!

Using footable js will eliminate all form elements within the table

trouble encountered while parsing JSON information using JavaScript

Display and conceal information upon tweeting

Designing scroll boxes that are not continuous and tracking the time spent in each section

Attempting to implement a Material UI dialog within a specialized contextual modal

Typescript throws an error indicating that the "this" object in Vue methods may be undefined, displaying error code TS2532