미리보기

설치

npm install --save react-fullpage

기본구조

import {SectionsContainer, Section} from 'react-fullpage';

export default function MainPage() {
  let options = {
  };
  
  return (
      <SectionsContainer {...options}>
            <Section>Page 1</Section>
            <Section>Page 2</Section>
            <Section>Page 3</Section>
            <Section>Page 4</Section>
      </SectionsContainer>
  );
}

Option

🔥 (필수) anchors section 개수에 맞게 해당 section이름을 설정해야한다.
그럼 스크롤시 url의 # 오른쪽에 사용자가설정한 section명이 나타난다.

let options = {
  activeClass:          'active', // the class that is appended to the sections links
  anchors:              [], // the anchors for each sections
  arrowNavigation:      true, // use arrow keys
  className:            'SectionContainer', // the class name for the section container
  delay:                1000, // the scroll animation speed
  navigation:           true, // use dots navigatio
  scrollBar:            false, // use the browser default scrollbar
  sectionClassName:     'Section', // the section class name
  sectionPaddingTop:    '0', // the section top padding
  sectionPaddingBottom: '0', // the section bottom padding
  verticalAlign:        false // align the content of each section vertical
};

사용예제

import React from 'react';
import { SectionsContainer, Section } from 'react-fullpage';
import HeroSection from './section/HeroSection';
import HistoryTimeLine from './section/HistoryTimeLine';
import Vison from './section/Vison';
import StroySection from './section/StroySection';
import SloganSection from './section/SloganSection';

export default function BrandStory() {
    let options = {
        activeClass: 'active',
        anchors: ['HeroSection', 'TimeLineSection', 'MissionSection', 'StorySection', 'SloganSection'],
        arrowNavigation: true,
        className: 'SectionContainer',
        delay: 1000,
        navigation: true,
        scrollBar: false,
        sectionClassName: 'Section',
        sectionPaddingTop: '0',
        sectionPaddingBottom: '0',
        verticalAlign: false,
    };
    
    const sectionComponents = [HeroSection, HistoryTimeLine, Vison, StroySection, SloganSection];
	
    
    //기본 ver
    return (
          <SectionsContainer {...options}>
              <Section>
                  <HeroSection />
              </Section>
              <Section>
                  <HistoryTimeLine />
              </Section>
              <Section>
                  <Vison />
              </Section>
              <Section>
                  <StroySection />
              </Section>
              <Section>
                  <SloganSection />
              </Section>
          </SectionsContainer>
      );
  
  	//리팩토링 ver
    return (
        <SectionsContainer {...options}>
            {sectionComponents.map((Component, i) => (
                <Section key={sectionAnchors[i]}>
                    <Component />
                </Section>
            ))}
        </SectionsContainer>
    );
}