React uses the function of page turning on the whole screen

1. Installation

yarn add 

2. Introduced in the project

import fullpage from '';
import '/dist/';

3. Mount

After the dom loading is complete, instantiate fullpage

  useEffect(() => {
    new fullpage('#fullpage', {
      credits: { enabled: false, label: '', position: 'right' },
      // Configuration options      // For example: sectionsColor, navigation, etc.    });
  }, []);

new fullpageI'll automatically search for itdom element with id fullpage, therefore, the root element's id must be guaranteed to befullpage, as follows:

    <div >
      <div className='section' style={{ boxSizing: 'border-box', height:  }}>
      ...
      </div>
    </div>

The object that fullpage works isPage, while the page usessectionThis class name is represented as shown in the above code.

4. Modify

Some private goods are mixed, and they need to be removed manually

.fp-overflow {
  height: 100%;
}

.fp-watermark {
  display: none;
}

The first thing to eliminate is vertical centering, which is generally not needed;

The second is the trademark of this component, which also needs to be removed.

This is the end of this article about using React to realize the full-screen page turn function. For more related React page turn content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!