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">[email protected]</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>
    )
      }
})

Ori Drori · Accepted Answer · 2020-09-18 20:30:03Z

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; }

edited Sep 18, 2020 at 20:30

answered Sep 18, 2020 at 20:11

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Caleb Over a year ago

I had to move some stuff around to incorporate this and now the header is showing up no matter what, I can update my post to show the code.

Ori Drori Over a year ago

Have you added a class with display: none?

Caleb Over a year ago

yes, I had it spelled wrong but now it is fixed, still not working.

Caleb Over a year ago

I am not sure how to control where the viewport is.

Ori Drori Over a year ago

Use ViewportBlock and not Block, and pass handlers to change the state (setState in class component). According to the state change the class on the element you want to show or hide.

Collectives™ on Stack Overflow

React in CSS with react in viewport

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related