🌐 Web Development: React, Next.js, PWAs & E-commerce solutions📱 Mobile Apps: React Native & Flutter for iOS/Android💻 Desktop Apps: Cross-platform Electron applications🍽️ RestaurantPOS Pro: Complete restaurant management system🛍️ RetailPOS Elite: Smart retail point of sale solution📋 WaitlistPro: Smart waitlist management platform🛠️ Developer Tools: Powerful SDKs, APIs & libraries for seamless integration🎯 Code Playground: Live JavaScript, Python & Java execution📚 Programming Academy: Interactive quizzes for 17+ languages⚙️ Backend & APIs: RESTful, GraphQL & microservices architecture🚀 DevOps: CI/CD pipelines, Docker, Kubernetes & cloud deployment🔧 App Management: Performance monitoring, security updates & maintenance🌐 Web Development: React, Next.js, PWAs & E-commerce solutions📱 Mobile Apps: React Native & Flutter for iOS/Android💻 Desktop Apps: Cross-platform Electron applications🍽️ RestaurantPOS Pro: Complete restaurant management system🛍️ RetailPOS Elite: Smart retail point of sale solution📋 WaitlistPro: Smart waitlist management platform🛠️ Developer Tools: Powerful SDKs, APIs & libraries for seamless integration🎯 Code Playground: Live JavaScript, Python & Java execution📚 Programming Academy: Interactive quizzes for 17+ languages⚙️ Backend & APIs: RESTful, GraphQL & microservices architecture🚀 DevOps: CI/CD pipelines, Docker, Kubernetes & cloud deployment🔧 App Management: Performance monitoring, security updates & maintenance
Back to Documentation

React Hooks Collection

42 production-ready React hooks

Installation

npm install @jutech-devs/hooks
⭐View on GitHub📦NPM Package

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 sync
  • • useSessionStorage - sessionStorage sync
  • • useDarkMode - Complete theme system

🌐 Network & Data

  • • useFetch - Smart HTTP requests
  • • useAsync - Async operation management
  • • useWebSocket - Real-time connections
  • • useWebRTC - Video/audio communication

🎨 UI & Interactions

  • • useClickOutside - Outside click detection
  • • useWindowSize - Responsive dimensions
  • • useIntersectionObserver - Element visibility
  • • useDrag - Drag & drop functionality
  • • useGesture - Advanced touch gestures

📱 Device & Hardware

  • • useIsMobile - Mobile device detection
  • • useGeolocation - GPS location tracking
  • • useBattery - Battery status monitoring
  • • useCamera - Camera access & capture
  • • usePermission - Browser permissions

🤖 AI & Machine Learning

  • • useML - Neural networks in browser
  • • useComputerVision - Image analysis
  • • useNLP - Natural language processing
  • • useRecommendationEngine - Personalization

Popular Hooks Examples

useToggle

const [isVisible, { toggle, setTrue, setFalse }] = useToggle(false);

return (
  <div>
    <button onClick={toggle}>Toggle</button>
    <button onClick={setTrue}>Show</button>
    <button onClick={setFalse}>Hide</button>
    {isVisible && <div>Content</div>}
  </div>
);

useFetch

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

if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;

return (
  <div>
    {data?.map(post => <div key={post.id}>{post.title}</div>)}
    <button onClick={refetch}>Refresh</button>
  </div>
);

useLocalStorage

const [user, setUser] = useLocalStorage('user', null);

return (
  <div>
    {user ? (
      <div>Welcome, {user.name}!</div>
    ) : (
      <button onClick={() => setUser({ name: 'John' })}>
        Login
      </button>
    )}
  </div>
);

useGeolocation

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

return (
  <div>
    {error ? (
      <div>Error: {error.message}</div>
    ) : (
      <div>
        Lat: {latitude}, Lng: {longitude}
      </div>
    )}
  </div>
);

useComputerVision

const { detectObjects, detectFaces } = useComputerVision();

const handleImageUpload = async (event) => {
  const file = event.target.files[0];
  const objects = await detectObjects(file);
  const faces = await detectFaces(file);
  
  console.log('Objects:', objects);
  console.log('Faces:', faces);
};

return (
  <input type="file" onChange={handleImageUpload} />
);

Key Features

✓
TypeScript First - Full type safety
✓
Zero Dependencies - Lightweight
✓
SSR Compatible - Works with Next.js
✓
Tree Shakeable - Import only what you need

Pricing

Free & Open Source

  • • All 42 hooks included
  • • Full TypeScript support
  • • MIT License
  • • Community support
  • • Regular updates