@shohan/react-hooks

A comprehensive collection of React hooks for building modern web applications.

Installation

npm install @shohan/react-hooks
# or
pnpm add @shohan/react-hooks
# or
yarn add @shohan/react-hooks

Features

• 🔐 Auth - Complete authentication with context, provider, and config factory
• 🛒 Cart - Shopping cart management with persistence
• 📝 Form - Form state, validation, and submission handling
• 🔍 Filter - Filtering and sorting utilities
• 📄 Pagination - Pagination state management
• 💾 Storage - localStorage & sessionStorage hooks
• ⏱️ Timing - Debounce, throttle, interval, timeout
• 🖥️ UI - Media queries, window size, scroll position, hover, focus
• ⚡ Async - Async operations, copy to clipboard, social share
• 🔄 State - Toggle, counter, list, map, previous value
• 🎯 Lifecycle - Mount/unmount callbacks

Quick Start

Auth Setup

// config/auth.ts
import { createAuthConfig } from '@shohan/react-hooks/auth'
import axios from 'axios'

const api = axios.create({ baseURL: 'https://api.example.com' })

export const authConfig = createAuthConfig({
  loginFn: async (credentials) => {
    const { data } = await api.post('/auth/login', credentials)
    return data // { user, tokens }
  },
  logoutFn: async () => {
    await api.post('/auth/logout')
  },
  onLogin: (user) => console.log(`Welcome ${user.name}!`),
  onError: (error) => console.error(error.message),
})

// App.tsx
import { AuthProvider } from '@shohan/react-hooks/auth'
import { authConfig } from './config/auth'

function App() {
  return (
    <AuthProvider config={authConfig}>
      <YourApp />
    </AuthProvider>
  )
}

// Any component
import { useContext } from 'react'
import { AuthContext } from '@shohan/react-hooks/auth'

function Profile() {
  const { user, isAuthenticated, logout } = useContext(AuthContext)

  if (!isAuthenticated) return <div>Please log in</div>

  return (
    <div>
      <h1>Welcome {user.name}</h1>
      <button onClick={logout}>Logout</button>
    </div>
  )
}

Storage Hooks

import { useLocalStorage, useSessionStorage } from '@shohan/react-hooks/storage'

function Settings() {
  const [theme, setTheme] = useLocalStorage('theme', 'light')
  const [sessionData, setSessionData] = useSessionStorage('session', {})

  return <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>Toggle Theme: {theme}</button>
}

Form Hook

import { useForm, validators } from '@shohan/react-hooks/features'

function LoginForm() {
  const { values, errors, handleChange, handleSubmit, isSubmitting } = useForm({
    initialValues: { email: '', password: '' },
    validationRules: {
      email: [validators.required(), validators.email()],
      password: [validators.required(), validators.minLength(8)],
    },
    onSubmit: async (values) => {
      await api.login(values)
    },
  })

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" value={values.email} onChange={handleChange} />
      {errors.email && <span>{errors.email}</span>}

      <input name="password" type="password" value={values.password} onChange={handleChange} />
      {errors.password && <span>{errors.password}</span>}

      <button type="submit" disabled={isSubmitting}>
        Login
      </button>
    </form>
  )
}

UI Hooks

import { useMediaQuery, useWindowSize, useScrollPosition } from '@shohan/react-hooks/ui'

function ResponsiveComponent() {
  const isMobile = useMediaQuery('(max-width: 768px)')
  const { width, height } = useWindowSize()
  const { x, y } = useScrollPosition()

  return (
    <div>
      <p>
        Screen: {width}x{height}
      </p>
      <p>
        Scroll: {x}, {y}
      </p>
      <p>Device: {isMobile ? 'Mobile' : 'Desktop'}</p>
    </div>
  )
}

Timing Hooks

import { useDebounce, useThrottle, useInterval } from '@shohan/react-hooks/timing'

function SearchComponent() {
  const [query, setQuery] = useState('')
  const debouncedQuery = useDebounce(query, 300)

  useEffect(() => {
    if (debouncedQuery) {
      fetchResults(debouncedQuery)
    }
  }, [debouncedQuery])

  return <input value={query} onChange={(e) => setQuery(e.target.value)} />
}

API Reference

Auth Module

| Export | Description | | ------------------ | --------------------------------- | | AuthContext | React context for auth state | | AuthProvider | Provider component | | createAuthConfig | Factory function to create config |

Storage Module

| Hook | Description | | ------------------- | ------------------------------- | | useLocalStorage | Persist state in localStorage | | useSessionStorage | Persist state in sessionStorage |

UI Module

| Hook | Description | | ------------------- | ----------------------- | | useMediaQuery | CSS media query hook | | useWindowSize | Window dimensions | | useScrollPosition | Scroll position | | useHover | Element hover state | | useFocus | Element focus state | | useClickOutside | Click outside detection | | useKeyPress | Keyboard key detection | | useEventListener | Generic event listener |

Timing Module

| Hook | Description | | ------------- | --------------------- | | useDebounce | Debounced value | | useThrottle | Throttled value | | useInterval | Interval with cleanup | | useTimeout | Timeout with cleanup |

State Module

| Hook | Description | | ------------- | ---------------------- | | useToggle | Boolean toggle | | useCounter | Counter with min/max | | useList | Array state management | | useMap | Map/object state | | usePrevious | Previous value |

Async Module

| Hook | Description | | -------------------- | --------------------- | | useAsync | Async operation state | | useCopyToClipboard | Clipboard operations | | useSocialShare | Social media sharing |

Features Module

| Hook | Description | | --------------- | ----------------------- | | useForm | Form state & validation | | useCart | Shopping cart | | useProduct | Product state | | useFilter | Filtering & sorting | | usePagination | Pagination | | useWishlist | Wishlist management | | useCheckout | Checkout flow |

License

MIT