setActiveIndex

setActiveIndex

• component: <FullpageContainer />

• requird : true

• type : (value: number) => void;

component 내외부에서 activeIndex를 변경하기 위해 사용합니다.

아래는 setActiveIndex 를 사용하여 react-fullpage 컨트롤러를 구현한 샘플코드입니다.

'use client';

import { useState } from 'react';
import { FullpageContainer, FullpageSection } from '@shinyongjun/react-fullpage';
import '@shinyongjun/react-fullpage/css';

function ExampleComponent() {
  const [activeIndex, setActiveIndex] = useState<number>(0);

  return (
    <>
      <FullpageContainer
        activeIndex={activeIndex}
        setActiveIndex={setActiveIndex}
      >
        <FullpageSection>
          <div>Section 1</div>
        </FullpageSection>
        <FullpageSection>
          <div>Section 2</div>
        </FullpageSection>
        <FullpageSection>
          <div>Section 3</div>
        </FullpageSection>
        <FullpageSection isAutoHeight>
          <footer>Footer</footer>
        </FullpageSection>
      </FullpageContainer>
      <div className="controller">
        <button
          type="button"
          className={`${activeIndex === 0 ? 'active' : ''}`}
          onClick={() => setActiveIndex(0)}
        >1</button>
        <button
          type="button"
          className={`${activeIndex === 1 ? 'active' : ''}`}
          onClick={() => setActiveIndex(1)}
        >2</button>
        <button
          type="button"
          className={`${activeIndex === 2 ? 'active' : ''}`}
          onClick={() => setActiveIndex(2)}
        >3</button>
      </div>
    </>
  );
}

export default ExampleComponent;