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