npm package: @jutech-devs/react-hooks
Description: A comprehensive collection of 30+ modern, production-ready React hooks for enhanced development experience
Author: Your Name
Latest version: 2.0.2

# @jutech-devs/hooks

The ultimate collection of **42 production-ready React hooks** for modern web development. From basic utilities to advanced AI capabilities.

## 🚀 Installation

```bash
npm install @jutech-devs/hooks
# or
yarn add @jutech-devs/hooks
```

## 📖 Quick Start

```tsx
import { useToggle, useFetch, useDarkMode } from '@jutech-devs/hooks';

function App() {
  const [isOpen, { toggle }] = useToggle();
  const { data, loading } = useFetch('/api/users');
  const { isDark, toggleTheme } = useDarkMode();

  return (
    <div className={isDark ? 'dark' : 'light'}>
      <button onClick={toggle}>
        {isOpen ? 'Close' : 'Open'} Modal
      </button>
      <button onClick={toggleTheme}>Toggle Theme</button>
      {loading ? 'Loading...' : data?.length} users
    </div>
  );
}
```

## 🎯 Hook Categories

### 🔧 **Basic Utilities**
- `useToggle` - Boolean state management
- `useDebounce` - Value debouncing
- `usePrevious` - Track previous values
- `useCountdown` - Timer functionality
- `useHover` - Mouse hover detection

### 💾 **Storage & Persistence**
- `useLocalStorage` - localStorage with React sync
- `useSessionStorage` - sessionStorage with React sync
- `useDarkMode` - Complete theme system

### 🌐 **Network & Data**
- `useFetch` - Smart HTTP requests with caching
- `useAsync` - Async operation management
- `useWebSocket` - Real-time WebSocket connections
- `useWebRTC` - Video/audio communication

### 🎨 **UI & Interactions**
- `useClickOutside` - Outside click detection
- `useWindowSize` - Responsive window dimensions
- `useIntersectionObserver` - Element visibility
- `useDrag` - Drag & drop functionality
- `useGesture` - Advanced touch gestures
- `useSpring` - Physics-based animations

### 📱 **Device & Hardware**
- `useIsMobile` - Mobile device detection
- `useGeolocation` - GPS location tracking
- `useBattery` - Battery status monitoring
- `useNetworkState` - Network connection info
- `useCamera` - Camera access & capture
- `usePermission` - Browser permission management

### ⌨️ **Input & Events**
- `useKeyboardShortcut` - Hotkey combinations
- `useCopyToClipboard` - Clipboard operations
- `useSpeechRecognition` - Voice input
- `useIdle` - User activity detection
- `useScrollPosition` - Scroll tracking

### 📝 **Forms & Validation**
- `useFormValidation` - Real-time form validation
- `useFileUpload` - File upload with progress

### 🚀 **Performance**
- `useVirtualList` - Handle large datasets
- `useWorker` - Web Workers for background tasks

### 📱 **Responsive Design**
- `useMediaQuery` - Custom media queries
- `useIsSmall` - Small screen detection
- `useIsTablet` - Tablet detection
- `useIsDesktop` - Desktop detection
- `usePrefersDarkMode` - System theme preference
- `usePrefersReducedMotion` - Accessibility preference

### 🔔 **Notifications**
- `useNotification` - Browser notifications

### 🧠 **Advanced Patterns**
- `useStateMachine` - State machine implementation
- `useUndoRedo` - Undo/redo functionality
- `useObservable` - Reactive programming
- `useP2P` - Peer-to-peer networking

### 🤖 **AI & Machine Learning**
- `useML` - Neural networks in the browser
- `useComputerVision` - Image analysis & object detection
- `useNLP` - Natural language processing
- `useRecommendationEngine` - Personalization algorithms

## 📚 Detailed Examples

### Basic Usage

```tsx
// Toggle state
const [isVisible, { toggle, setTrue, setFalse }] = useToggle(false);

// Debounced search
const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 300);

// Local storage
const [user, setUser] = useLocalStorage('user', null);
```

### Network Operations

```tsx
// Fetch with caching
const { data, loading, error, refetch } = useFetch('/api/posts', {
  cache: true,
  immediate: true
});

// WebSocket connection
const { sendMessage, lastMessage, isConnected } = useWebSocket('ws://localhost:8080');

// Async operations
const { execute, loading, data, error } = useAsync(async (id) => {
  return await api.getUser(id);
});
```

### UI Interactions

```tsx
// Click outside detection
const ref = useClickOutside(() => setIsOpen(false));

// Drag and drop
const { isDragging, position, dragRef } = useDrag();

// Intersection observer
const [setNode, entry] = useIntersectionObserver({
  threshold: 0.5,
  freezeOnceVisible: true
});
```

### Device APIs

```tsx
// Geolocation
const { latitude, longitude, error } = useGeolocation({
  enableHighAccuracy: true,
  watch: true
});

// Camera access
const { stream, startCamera, takePhoto, isStreaming } = useCamera();

// Battery status
const { level, charging, supported } = useBattery();
```

### Advanced Features

```tsx
// Form validation
const { values, errors, setValue, isValid } = useFormValidation(
  { email: '', password: '' },
  {
    email: [(v) => v.includes('@') ? null : 'Invalid email'],
    password: [(v) => v.length >= 8 ? null : 'Too short']
  }
);

// State machine
const { state, send, can } = useStateMachine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: { on: { TOGGLE: 'active' } },
    active: { on: { TOGGLE: 'inactive' } }
  }
});

// Computer vision
const { detectObjects, detectFaces, analyzeScene } = useComputerVision();
const objects = await detectObjects(imageElement);
```

## 🎯 Key Features

✅ **TypeScript First** - Full type safety and IntelliSense  
✅ **Zero Dependencies** - Lightweight and fast  
✅ **SSR Compatible** - Works with Next.js, Remix, etc.  
✅ **Tree Shakeable** - Import only what you need  
✅ **Production Ready** - Battle-tested in real applications  
✅ **Comprehensive** - 42 hooks covering every use case  
✅ **Modern APIs** - WebRTC, WebWorkers, AI, and more  
✅ **Performance Optimized** - Minimal re-renders  

## 🔧 Requirements

- React 16.8.0 or higher
- TypeScript 4.0+ (optional but recommended)

## 📄 License

MIT © JuTech Devs

## 🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

## 📞 Support

For support, please open an issue on GitHub or contact us at support@jutech-devs.com