React in CSS with react in viewport

Question

I am using react in viewport from here: https://github.com/roderickhsiao/react-in-viewport and I set up the boiler plate so that the following line of code works:

<ViewportBlock onEnterViewport={() => console.log('enter')} onLeaveViewport={() => console.log('leave')} />

Looking at console.log it is saying enter and leave where I need it too. However, I need to have it say onEnterViewport set .Header (the css className is Header) to display:none in css, and onLeaveViewport set to display:block

Edit: Full code:

const Block = (props: { inViewport: boolean }) => {
  const { inViewport, forwardedRef } = props;
  const color = inViewport ? '#217ac0' : '#ff9800';
  const text = inViewport ? 'In viewport' : 'Not in viewport';
  return (
    <div className="viewport-block" ref={forwardedRef}>
      {/* <h3>{ text }</h3>
      <div style={{ width: '400px', height: '300px', background: color }} /> */}
      <Link to="Header" spy={true} smooth={true} offset={-100} duration={1400}><img src={arrow} alt="arrow" className={inViewport ? 'hide' : 'Header-div2-mainnav-arrow' } /></Link>
    </div>
    
  );
};

const ViewportBlock = handleViewport(Block, /** options: {}, config: {} **/);


export const Header = () => ({

    componentDidMount: function() {
        Events.scrollEvent.register('begin', function(to, element) {
          console.log('begin', arguments);
        });
     
        Events.scrollEvent.register('end', function(to, element) {
          console.log('end', arguments);
        });
     
        scrollSpy.update();
      },
      componentWillUnmount: function() {
        Events.scrollEvent.remove('begin');
        Events.scrollEvent.remove('end');
      },

      scrollToBottom: function() {
        scroll.scrollToBottom();
      },
      handleSetActive: function(to) {
        console.log(to);
      },

       
      render: function() {

    return (
        <div className="Header">
            
            <div className="Header-div1">
                {/* background image */}
                <h1 className="Header-div1-number">910-910-910</h1>
                <h2 className="Header-div1-email">larryslawn@gmail.com</h2>
            </div>
            <div className="Header-div2">
                <h1 className="Header-div2-h1"><span className="Header-div2-span">Larry's </span>Lawn Mowing</h1>
                <p className="Header-div2-p">No job too big or too small, we do it all </p>
                <div className="Header-div2-mainnav">
                    <Link to="Pricing" spy={true} smooth={true} offset={-50} duration={1200}><p>Pricing</p></Link>
                    <Link to="Services" spy={true} smooth={true} offset={-100} duration={1200}><p className="Header-div2-mainnav-p">Services</p></Link>
                    <Link to="Contact" spy={true} smooth={true} offset={-100} duration={1400}><p>Contact</p></Link>
                </div>
                <Block />
                
            </div>
                
        </div>
    )
      }
})

Answer 1

Use useState to toggle a class with display: none on the Header component:

const Example = () => {
  const [inView, setInView] = useState(false)
  
  return (
    <>
      <ViewportBlock
        onEnterViewport={() => setInView(true)}
        onLeaveViewport={() => setInView(false)} 
      />  

      <Header className={inView ? 'hide' : '' }>Header</Header>
    </>
  )
}

CSS:

hide { display: none; }