Symbol

setActiveIndex

activeIndex의 변경을 위해 필요한 필수 옵션입니다. 라이브러리 외부에서 activeIndex의 조작을 할 때 사용할 수 있습니다.
  • component : <FullpageContainer />
  • required : true
  • type : (value: number) => void;

예시

아래는 setActiveIndex를 사용하여 controller를 구현한 예제 코드 입니다.
'use client'; import { useState } from 'react'; import { FullpageContainer, FullpageSection } from '@shinyongjun/react-fullpage'; import '@shinyongjun/react-fullpage/css'; export default function App() { 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> </> ); }