React & Typescript Issue: trigger elements with InsertionObserver using props and manage them in other component

Question

Small premise: I'm not a great Typescript expert

Hi everyone, I'm working on my personal site, I decided to develop it in Typescript to learn the language. My component tree is composed, as usual, of App.tsx which render the sub-components, in this case Navbar.jsx and Home.jsx.

Below is the App.jsx code:

import './App.css';
import { BrowserRouter as Router, useRoutes } from 'react-router-dom';
import Home from './components/Home';
import Navbar from './components/Navbar';
import { useState } from 'react';


function App(){
  const [navbarScroll,setNavbarScrool]=useState(Object)
   
  const handleLocationChange = (navbarScroll : boolean) => {
    setNavbarScrool(navbarScroll)
    return navbarScroll
  }

  const AppRoutes = () => {
    let routes = useRoutes([
      { path: "/", element: <Home handleLocationChange={handleLocationChange}/> },
      { path: "component2", element: <></> },
    ]);
    return routes;
  };

  return (
    <Router>
      <Navbar navbarScroll={navbarScroll}/>
      <AppRoutes/>
    </Router>
  );
}

export default App;

Here, instead, the Home.jsx code:

import { useInView } from 'react-intersection-observer';
import HomeCSS from "../styles/home.module.css"
import mePhoto from "../assets/me.png"
import { useEffect, useState } from 'react';
interface AppProps {
    handleLocationChange: (values: any) => boolean;
}
export default function Home(props: AppProps){
    const { ref: containerChange , inView: containerChangeIsVisible, entry} = useInView();
    
    useEffect(()=>{ 
            props.handleLocationChange(containerChangeIsVisible)
            //returns false at first render as expected
            console.log("Home "+containerChangeIsVisible)
        },[])

    return(
        <>
            <div className={`${ HomeCSS.container} ${containerChangeIsVisible? HomeCSS.container_variation: ''}`}>
                <div className={HomeCSS.container__children}>
                    {/* when i scroll on the div the css change (this works)*/}
                    <h1 className={`${ HomeCSS.container__h1} ${containerChangeIsVisible? HomeCSS.container__h1_variation: ''}`}>My<br/> Name</h1>
                    <p>Computer Science student.</p>
                </div>
                <img src={mePhoto} className={HomeCSS.image_style}/>
            </div>

            <div ref={containerChange} style={{height:800,background:"orange"}}>
                <p style={{marginTop:20}}>HIII</p>
            </div>
        </>
    )
}

And Navbar.jsx:

import NavbarCSS from "../styles/navbar.module.css"
import acPhoto from "../assets/ac.png"
import { Link } from "react-router-dom";
import { useEffect, useState } from "react";


interface NavbarScroolProp{
    navbarScroll:boolean
}
export default function Navbar(props:NavbarScroolProp){
    
    const [scrollState,setScrollState]=useState(false)
    const [pVisible,setpVisible] = useState('')
    useEffect(()=>{
        setTimeout(() => {
          setpVisible("")
          }, 3000)
        setpVisible("100%")
    },[])
    
//returns false also when should be true
    console.log(props.navbarScroll)
    return ( 
    <>
        {/*the props is undefined so the css doesn't change, i need to do this*/}
        <nav className={`${props.navbarScroll?NavbarCSS.nav__variation:NavbarCSS.nav}`}>
                    <div className={NavbarCSS.nav_row}>
                        <div className={NavbarCSS.nav_row_container}>
                            <img src={acPhoto} className={NavbarCSS.image_style}/>
                            <p className={NavbarCSS.p_style} style={{maxWidth: pVisible}}>My name</p>
                        </div>
                        <div className={NavbarCSS.nav_row_tagcontainer}>
                            <Link className={NavbarCSS.nav_row_tag} to="/"> Home</Link>
                            <Link className={NavbarCSS.nav_row_tag} to="/"> About</Link>
                            <Link className={NavbarCSS.nav_row_tag} to="/"> Contact</Link>
                        </div>
                    </div>
        </nav>
    </>
     );
}

In my application I want to change the background color whenever the div referring to the InsertionObserver ( I use "useInView" hook , from :https://github.com/thebuilder/react-intersection-observer) is displayed. The problem is that the div in question is in the Home.jsx component and I need to change the color of the divs in the navbar as well when the div in Home is triggered(or other components in case I need to in the future). The question is: How can I dynamically trigger DOM elements of other components (to then perform certain operations) using the InsertionObserver ? As you can see from the code I tried to create Props, but everything returns undefined and doesn't involve any changes. I've tried without useEffect, without using the useInView hook, passing the object instead of the boolean value, but I can't find any solutions to this problem.

You would be of great help to me.

PS: I would like to leave the Navbar.jsx component where it is now, so that it is visible in all components. Any advice or constructive criticism is welcome.

React & Typescript Issue: trigger elements with InsertionObserver using props and manage them in other component

0 Answers0