@jutech-devs/hooks

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

🚀 Installation

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

📖 Quick Start

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

// 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

// 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

// 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

// 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

// 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 [email protected]