denwa-react-shared/skills/utility-hooks/SKILL.md

---
name: utility-hooks
description: >
  Essential helper hooks for responsive design, provider composition, 
  and application lifecycle management.
type: framework
library: denwa-react-shared
framework: react
library_version: "1.0.88"
requires:
  - session-auth
---

# Shared Utilities & Hooks

Standardized helpers to reduce boilerplate in provider setup and responsive logic.

## Setup

```tsx
import { ProviderComposer, useViewPort } from 'denwa-react-shared';

const App = ({ children }) => {
  return (
    <ProviderComposer
      providers={[
        <AuthProvider key="auth" />,
        <ConfigProvider key="config" />,
        <ReactQueryProvider key="query" />,
      ]}
    >
      {children}
    </ProviderComposer>
  );
};
```

## Core Patterns

### Responsive Logic with useViewPort
Standardizes breakpoints across the admin panel.

```tsx
const { isMobile, isTablet, isLaptop } = useViewPort();

return (
  <div>
    {isMobile ? <MobileNav /> : <DesktopNav />}
  </div>
);
```

### Local Storage Wrapper
Safe wrappers for browser storage with type-safety.

```tsx
import { getStorageItem, setStorageItem } from 'denwa-react-shared';

const theme = getStorageItem('admin_theme', 'light');
setStorageItem('admin_theme', 'dark');
```

## Common Mistakes

### MEDIUM Pyramid of doom in Providers
Wrong:
```tsx
<Auth>
  <Config>
    <Query>
      <Layout>{children}</Layout>
    </Query>
  </Config>
</Auth>
```
Correct:
```tsx
<ProviderComposer providers={[<Auth/>, <Config/>, <Query/>]}>
  <Layout>{children}</Layout>
</ProviderComposer>
```
`ProviderComposer` simplifies deep nesting of React providers, making the root file more readable.

Source: src/shared/lib/provider-composer/index.tsx

### MEDIUM Hardcoding breakpoints
Wrong:
```tsx
const isMobile = useMediaQuery('(max-width: 768px)');
```
Correct:
```tsx
const { isMobile } = useViewPort();
```
Internal library components (like `AdminTable`) use breakpoints from `useViewPort`. Custom components should use the same hook to ensure consistent responsive behavior.

Source: src/shared/lib/hooks/use-view-port.ts