doodlin-hooks

• React에서 재사용 가능성이 높은 Custom Hook들을 모아놓은 라이브러리입니다.

Hooks

Async

• useUpdateFetch: 비동기 요청을 반복해서 요청할 수 있는 hook
• useTimeout: timeout event를 따로 clear 할 필요 없이 Timeout 이벤트를 걸 수 있는 함수를 반환하는 hook
• useFlicker: false --filckFunc()--> true --n초 후--> false 로 바뀌는 상태와 함수를 반환하는 hook (기본 3초)

Listener

• useWindowEventListner: window에 이벤트를 걸 수 있는 hook (option.initExecute로 처음에 실행여부 결정 가능)
• useDocumentEventListner: document에 이벤트를 걸 수 있는 hook (option.initExecute로 처음에 실행여부 결정 가능)
• useEventListener: 전달받은 ref element에 이벤트를 걸 수 있는 hook (element가 없으면 window)
• useOutsideClick: 전달받은 ref element 바깥을 클릭하는 이벤트를 핸들링 할 수 있는 hook
• useKeyboardEvent: keyboard event trigger를 걸어주는 hook
• useInfiniteScroll: IntersectionObserver API를 이용해 ref 기준 Infinite scroll을 걸어주는 hook

Display

• useDomRect: ref element의 client rect를 가지고 오는 hook (resize 이벤트에 따라 동기화)
• useWindowSize: window의 크기를 가지오 오는 hook (resize 이벤트에 따라 동기화)
• useQuadrant: window의 크기와 부모 요소의 위치에 따라 option 뷰가 1 ~ 4분면 중 어느 곳에 있어야 하는지 판단하는 hook
• useCanvas2D: canvas에 2d context를 가지고 와서 data에 따라 조작할 수 있는 hook
• useToggle: 전달받은 ref element 바깥을 클릭하면 닫히는 toggle을 위한 hook
• useHover

Form

• useValueChangeElement: input, textarea의 props를 생성해주는 hook

Misc

• usePrevious: 리렌더링되기 전 이전 값을 가져오기 위한 hook