패키지 목록
@hua-labs/hooks
v1.0.0
React
Hooks
공통 React 커스텀 훅 모음. 로딩, 스크롤, 성능 모니터링.
$npm install @hua-labs/hooks
제공 훅
useLoading
로딩 상태를 관리하는 훅
typescript
const { isLoading, startLoading, stopLoading, withLoading } = useLoading();
// 자동 로딩 래핑
const fetchData = withLoading(async () => {
const response = await fetch('/api/data');
return response.json();
});useAutoScroll
자동 스크롤을 제어하는 훅
typescript
const { containerRef, scrollToBottom, isAtBottom } = useAutoScroll({
behavior: 'smooth',
threshold: 100,
});
return (
<div ref={containerRef}>
{messages.map(msg => <Message key={msg.id} {...msg} />)}
</div>
);usePerformanceMonitor
성능 메트릭을 모니터링하는 훅
typescript
const metrics = usePerformanceMonitor({
componentName: 'MyComponent',
enableInProduction: false,
});
// metrics: { renderCount, lastRenderTime, averageRenderTime }API Reference
useLoading(options?)
| 반환값 | Type |
|---|---|
| isLoading | boolean |
| startLoading | () => void |
| stopLoading | () => void |
| withLoading | <T>(fn: () => Promise<T>) => Promise<T> |
useAutoScroll(options?)
| 반환값 | Type |
|---|---|
| containerRef | RefObject<HTMLElement> |
| scrollToBottom | () => void |
| scrollToTop | () => void |
| isAtBottom | boolean |