useCycleList

배열을 요소를 순환하며 다음(nextIndex), 이전(prevIndex) 또는 특정 인덱스로 이동(setIndex) 할 수 있는 기능을 제공하는 훅입니다.

nextIndex, prevIndex, setIndex, resetIndex 호출 시 action 함수를 인자로 넣어 원하는 action을 실행 시킬 수 있습니다.

Code

🔗 실제 구현 코드 확인

Interface

typescript

type StepAction = ({ prev, next }: {
  prev: number;
  next: number;
}) => void;

interface UseCycleListReturnType<T> {
  currentItem: T;
  nextIndex: (action?: StepAction) => void;
  prevIndex: (action?: StepAction) => void;
  setIndex: (index: SetStateAction<number>, action?: StepAction) => void;
  resetIndex: (action?: StepAction) => void;
}

typescript

const useCycleList: <T>(
  arr: T[] | readonly T[],
  initialIndex?: number
) => UseCycleListReturnType<T>;

Usage

typescript

import { useCycleList } from '@modern-kit/react';

const Example = () => {
  const { currentItem, nextIndex, prevIndex, setIndex } = useCycleList([
    <div>첫 번째 요소</div>,
    <div>두 번째 요소</div>,
    <div>세 번째 요소</div>,
  ]);

  return (
    <div>
      {currentItem}
      <div>
        <button 
          onClick={() => nextIndex() /* 필요시 인자로 action 추가 가능 */}
        >
          nextIndex
        </button>
        <button onClick={() => prevIndex()}>prveIndex</button>
        <button onClick={() => setIndex(2)}>setIndex(2)</button>
      </div>
    </div>
  );
};

Example

첫 번째 요소