diff --git a/docs/index.md b/docs/index.md index ada74a50..56e5e32e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -3,7 +3,7 @@ layout: home hero: name: 'react-simplikit' - text: 'React utility library family' + text: 'Lightweight and powerful React utility library' image: src: /images/symbol.svg alt: react-simplikit @@ -16,10 +16,10 @@ hero: link: /core/intro features: - - title: '@react-simplikit/mobile' - details: Mobile-optimized hooks for web views and hybrid apps. Handle keyboard, viewport, scroll issues. - link: /mobile/intro - - title: react-simplikit - details: Core utilities, hooks, and components for React applications. Zero dependencies. - link: /core/intro + - title: 'Zero dependencies' + details: No external libraries are needed, making your project lightweight, faster, and easier to maintain. Effortlessly reduce bundle size and improve performance. + - title: 100% Test Coverage + details: Every function and branch is rigorously tested, ensuring robust and reliable code for any use case. + - title: Comprehensive Documentation + details: Each feature includes clear JSDoc comments, beginner-friendly guides, and practical examples. Start quickly with detailed and easy-to-follow instructions. --- diff --git a/docs/ko/index.md b/docs/ko/index.md index 60ba4452..86400238 100644 --- a/docs/ko/index.md +++ b/docs/ko/index.md @@ -3,7 +3,7 @@ layout: home hero: name: 'react-simplikit' - text: 'React 유틸리티 라이브러리 패밀리' + text: '가볍고 강력한 React 유틸리티 라이브러리' image: src: /images/symbol.svg alt: react-simplikit @@ -16,10 +16,10 @@ hero: link: /ko/core/intro features: - - title: '@react-simplikit/mobile' - details: 모바일 웹뷰와 하이브리드 앱을 위한 최적화된 훅. 키보드, 뷰포트, 스크롤 이슈를 해결합니다. - link: /ko/mobile/intro - - title: react-simplikit - details: React 애플리케이션을 위한 핵심 유틸리티, 훅, 컴포넌트. 의존성 없음. - link: /ko/core/intro + - title: '의존성이 전혀 없어요' + details: 추가 라이브러리가 필요 없어서 프로젝트가 가볍고 빠르며 유지보수가 쉬워요. 번들 크기를 줄이고 성능을 손쉽게 개선할 수 있어요. + - title: 100% 테스트 커버리지 + details: 모든 함수와 분기를 꼼꼼히 테스트해서 어떤 상황에서도 안정적이고 신뢰할 수 있는 코드를 보장해요. + - title: 풍부한 문서 + details: 각 기능에 대해 명확한 JSDoc, 초보자도 이해하기 쉬운 가이드, 실용적인 예제가 포함되어 있어요. 자세하고 따라 하기 쉬운 설명으로 바로 시작할 수 있어요. --- diff --git a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md index be78ed7c..41694ad6 100644 --- a/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md +++ b/packages/mobile/src/hooks/useBodyScrollLock/useBodyScrollLock.md @@ -1,7 +1,5 @@ # useBodyScrollLock -A React hook that locks body scroll when mounted and automatically unlocks when unmounted. This is particularly useful for modals, drawers, and other overlay components that should prevent background scrolling. - ## Interface ```ts @@ -10,50 +8,20 @@ function useBodyScrollLock(): void; ### Parameters -This hook takes no parameters. - ### Return Value -This hook returns `void` (no return value). +This hook does not return anything. -## Examples - -### Basic Usage +## Example +````tsx ```tsx function Modal() { useBodyScrollLock(); return
Modal content
; } -``` - -### Multiple Modals - Single Lock Pattern - -When you have multiple overlapping modals, use a single lock at the parent level instead of applying the lock to each modal individually. - -```tsx -// Multiple modals - single lock pattern -function BodyScrollLock() { - useBodyScrollLock(); - return null; -} - -function App() { - const hasModal = showModal1 || showModal2; +```` - return ( - <> - {hasModal && } - {showModal1 && } - {showModal2 && } - - ); -} ``` -## Notes - -- **SSR Safety**: This hook uses `useEffect`, which only runs on the client side, making it safe for server-side rendering (SSR). -- **Automatic Cleanup**: The scroll lock is automatically removed when the component unmounts, ensuring proper cleanup. -- **Multiple Modals**: For scenarios with multiple overlapping modals, implement a single lock at the parent level rather than applying locks to each modal individually. This prevents conflicts and ensures consistent behavior. -- **Browser Support**: Works in all modern browsers that support the underlying CSS modifications applied by the `enableBodyScrollLock` and `disableBodyScrollLock` utilities. +``` diff --git a/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md b/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md index 60b485ee..a430ee06 100644 --- a/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md +++ b/packages/mobile/src/hooks/useNetworkStatus/ko/useNetworkStatus.md @@ -21,13 +21,13 @@ description="네트워크 연결 데이터를 담은 객체예요." :nested="[ { name: 'effectiveType', -type: \"'slow-2g' | '2g' | '3g' | '4g' | undefined\", +type: "'slow-2g' | '2g' | '3g' | '4g' | undefined", required: false, description: '연결 품질 지표 - API가 지원되지 않으면 undefined', }, { name: 'type', -type: \"'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefined\", +type: "'bluetooth' | 'cellular' | 'ethernet' | 'mixed' | 'none' | 'other' | 'unknown' | 'wifi' | 'wimax' | undefined", required: false, description: '물리적 연결 타입 - API가 지원되지 않으면 undefined', }, diff --git a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md index 0f7e026b..d1dc7ddd 100644 --- a/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md +++ b/packages/mobile/src/hooks/useNetworkStatus/useNetworkStatus.md @@ -1,7 +1,5 @@ # useNetworkStatus -React hook to access Network Information API. Provides raw network connection data including connection type, quality, speed, and user preferences. Returns undefined for all properties if the API is not supported (e.g., Safari, Firefox). - ## Interface ```ts @@ -10,53 +8,27 @@ function useNetworkStatus(): NetworkStatus; ### Parameters -This hook takes no parameters. - ### Return Value -## Examples - -### Adaptive Image Quality +## Example -```tsx +````tsx +```tsxp function AdaptiveImage() { const { effectiveType, saveData } = useNetworkStatus(); @@ -64,45 +36,14 @@ function AdaptiveImage() { const useHighQuality = effectiveType === '4g' && !saveData; return ( - Content + Content ); } -``` - -### Conditional Video Autoplay +```` -```tsx -function VideoPlayer() { - const { type, downlink } = useNetworkStatus(); - - // Custom logic: only autoplay on wifi with good bandwidth - const shouldAutoplay = type === 'wifi' && (downlink ?? 0) > 5; - - return