merge: useDragIndexCarousel Infinity mode추가, useInterval 훅 추가 (#3)

merge: useDragIndexCarousel Infinity mode추가, useInterval 훅 추가 (#3)

README.md

@@ -13,6 +13,8 @@ Test code is not fully prepared yet. Please note.
 npm install @rapiders/react-hooks
 ```
 
+## Hooks
+
 ### useInput
 
 simple hook to change input components(uncontroll component) to controll component
@@ -27,6 +29,16 @@ simple hook to change input components(uncontroll component) to controll compone
     </div>
 ```
 
+### useInterval
+
+simple hook to setInterval with React Component
+
+```tsx
+...
+const callback = () => {};
+const { continueTimer, stop } = useInterval(callback, 1000); //1000ms
+```
+
 ## Animation
 
 The animation of this package is based on ClassName by default.
@@ -87,27 +99,29 @@ You have to register ref to animation HTMLElement.
 
 With "useDragIndexCarousel," you can easily implement a dragable Index Carousel.
 
-you can set `startIndex` and `minMove`.
-
-`minMove` : Minimum movement required for the index to shift.
-
 #### parameters
 
-`dataLength`, `startIndex`, `minMove`
+`dataLength`, `options`
+
+`options`: let you adjust the option of the carousel.
 
 `startIndex` : specifies the start index.
 
+`infinity` : Specifies whether to loop back to the beginning when the carousel reaches the end.
+
 `minMove`: determines how many slides you have to slide over.
 
 #### return values
 
-useDragCarousel returns `CarouselWrapper`, `next`, `prev`, `index`, `ref`, `isEnd`, `isStart`
+useDragCarousel returns `isDragging`, `CarouselWrapper`, `next`, `prev`, `index`, `ref`, `isEnd`, `isStart`
+
+`isDragging`: Indicates whether the element is being dragged or not.
 
 `CarouselWrapper`: renders children elements. It already contains `display:flex` property.
 
 `ref`: you need to assign a ref to the Carousel Wrapper.
 
-`next`: increase index
+`next`: increase index.
 
 `prev`: decrease index
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rapiders/react-hooks",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "react hooks for fast development",
   "main": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",

src/index.ts

@@ -4,6 +4,7 @@ import useFocusAnimation from './useFocusAnimation/useFocusAnimation';
 import useDragIndexCarousel from './useDragIndexCarousel/useDragIndexCarousel';
 import useCarousel from './useCarousel/useCarousel';
 import useScrollRatio from './useScrollRatio';
+import useInterval from './useInterval/useInterval';
 
 export {
   useInput,
@@ -12,4 +13,5 @@ export {
   useDragIndexCarousel,
   useCarousel,
   useScrollRatio,
+  useInterval,
 };

src/stories/useDragIndexCarousel/Docs.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Description } from '@storybook/blocks';
-import * as DragCarouselStories from './DragCarousel.stories';
+import * as DragCarouselStories from './TimerDragCarousel.stories';
 
 <Meta of={DragCarouselStories} />
 
@@ -9,4 +9,76 @@ useDragCarousel에서 반환된 컴포넌트를 통해 간편하게 Drag가능
 
 모바일, PC 환경 모두 지원합니다.
 
-<Canvas of={DragCarouselStories.defaultStory} />
+## 함수인자
+
+DragIndexCarousel에서 보여줄 데이터 길이와 optional 형태로 options객체를 받습니다.
+
+`startIndex`를 통해 Carousel의 시작 index를 지정할 수 있습니다.
+
+`infinity`를 통해 Carousel이 끝에 도달했을 때 다음 요소를 보여줄지, 아니면 처음 요소로 돌아갈지를 결정할 수 있습니다.
+
+`minMove`를 통해 얼마나 드래그해야 index가 변경되는지를 지정할 수 있습니다.
+
+## 반환값
+
+`isDragging` : 지금 슬라이더가 drag되고 있는지 상태를 반환합니다.
+
+`next` : 다음 요소로 넘깁니다.
+
+`prev` : 이전 요소로 넘깁니다.
+
+`CarouselWrapper` : 해당 요소에 ref를 넣어주어 Carousel 내부 데이터를 렌더링하는 Wrapper로 사용합니다. 기본적인 Carousel style이 지정되어있으며, 추가로 style을 부여할 수 있습니다.
+
+`ref`: CarouselWrapper에 주입해줄 ref 객체입니다.
+
+`isEnd`: Carousel이 마지막 요소에 도달했는지 표시하는 상태입니다.
+
+`isStart`: Carousel이 첫 요소에 도달했는지 표시하는 상태입니다.
+
+`index`: 현재 화면에 보이는 인덱스를 반환합니다.
+
+<Canvas of={DragCarouselStories.timerStory} />
+
+### 기본 사용 예시
+
+```typescript
+import useDragIndexCarousel from '../../useDragIndexCarousel/useDragIndexCarousel';
+import React from 'react';
+
+export default function DragCarousel() {
+  const images = [...];
+  const { CarouselWrapper, ref } = useDragIndexCarousel(images.length);
+  return (
+    <CarouselWrapper
+      ref={ref}
+      style={{
+        width: 500,
+        height: 500,
+      }}
+    >
+      {images.map((image) => (
+        <div
+          style={{
+            width: '100%',
+            backgroundColor: 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <img
+            src={image}
+            draggable={false}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </div>
+      ))}
+    </CarouselWrapper>
+  );
+}
+```

src/stories/useDragIndexCarousel/DragCarousel.tsx

@@ -6,7 +6,7 @@ export default function DragCarousel() {
     'https://i.namu.wiki/i/8BAuDmjlFbHoGpGTyTUJyeIsrWw7vrGKTvbOBS1DbaLNHHFL6D05TSZEyVGGffn_RIs6zrf4jCb5Xq5Lnbs8QQ.webp',
     'https://cdn.topstarnews.net/news/photo/202208/14724511_938042_3651.jpg',
     'https://image.xportsnews.com/contents/images/upload/article/2023/0825/mb_1692925582785123.jpg',
-    'https://photo.newsen.com/news_photo/2022/08/19/202208190935355510_1.jpg',
+    'https://cdn.entermedia.co.kr/news/photo/202210/30302_58507_3849.jpg',
   ];
   const { CarouselWrapper, ref } = useDragIndexCarousel(images.length);
   return (

src/stories/useDragIndexCarousel/TimerDragCarousel.stories.ts

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import DragCarousel from './DragCarousel';
+import TimerDragCarousel from './TimerDragCarousel';
+
+const meta = {
+  title: 'hooks/useDragCarousel',
+  component: TimerDragCarousel,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      canvas: {},
+    },
+  },
+} satisfies Meta<typeof TimerDragCarousel>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const timerStory: Story = {};

src/stories/useDragIndexCarousel/TimerDragCarousel.tsx

@@ -0,0 +1,57 @@
+import useDragIndexCarousel from '../../useDragIndexCarousel/useDragIndexCarousel';
+import useInterval from '../../useInterval/useInterval';
+
+import React, { useEffect } from 'react';
+
+export default function TimerDragCarousel() {
+  const images = [
+    'https://i.namu.wiki/i/8BAuDmjlFbHoGpGTyTUJyeIsrWw7vrGKTvbOBS1DbaLNHHFL6D05TSZEyVGGffn_RIs6zrf4jCb5Xq5Lnbs8QQ.webp',
+    'https://cdn.topstarnews.net/news/photo/202208/14724511_938042_3651.jpg',
+    'https://image.xportsnews.com/contents/images/upload/article/2023/0825/mb_1692925582785123.jpg',
+    'https://cdn.entermedia.co.kr/news/photo/202210/30302_58507_3849.jpg',
+  ];
+  const { CarouselWrapper, ref, next, isDragging } = useDragIndexCarousel(
+    images.length,
+    {
+      infinity: true,
+    }
+  );
+  const { continueTimer, stop } = useInterval(next, 3000);
+  useEffect(() => {
+    if (isDragging) stop();
+    else continueTimer();
+  }, [isDragging]);
+
+  return (
+    <CarouselWrapper
+      ref={ref}
+      style={{
+        width: 500,
+        height: 500,
+      }}
+    >
+      {images.map((image) => (
+        <div
+          style={{
+            width: '100%',
+            backgroundColor: 'black',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <img
+            src={image}
+            draggable={false}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'contain',
+            }}
+          />
+        </div>
+      ))}
+    </CarouselWrapper>
+  );
+}