Custom Hooks - Front-end Project

useAuth

Manages user authentication state and provides authentication methods.

Parameters

UseAuthOptions

Configuration options for the authentication hook

Show properties

boolean

default:"true"

Automatically refresh tokens when they expire

string

default:"/login"

URL to redirect to after logout

Return Value

User | null

The currently authenticated user object, or null if not authenticated

boolean

Whether a user is currently authenticated

boolean

Whether authentication state is being loaded

Function to log in a user with email and password

() => Promise<void>

Function to log out the current user

(data: RegisterData) => Promise<void>

Function to register a new user

Example

import { useAuth } from '@/hooks/useAuth';

function ProfilePage() {
  const { user, isAuthenticated, logout } = useAuth();

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

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

import { useAuth } from '@/hooks/useAuth';

function LoginPage() {
  const { login, isLoading } = useAuth({
    autoRefresh: false,
    redirectOnLogout: '/'
  });

  const handleSubmit = async (e) => {
    e.preventDefault();
    await login({ email, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* form fields */}
      <button disabled={isLoading}>Login</button>
    </form>
  );
}

useForm

Manages form state, validation, and submission with TypeScript support.

Parameters

required

Initial form values object

UseFormOptions<T>

Form configuration options

Show properties

(values: T) => ValidationErrors<T>

Validation function that returns error messages

(values: T) => Promise<void> | void

Form submission handler

boolean

default:"false"

Run validation on every field change

boolean

default:"true"

Run validation when field loses focus

Return Value

Current form values

ValidationErrors<T>

Validation errors for each field

Record<keyof T, boolean>

Which fields have been interacted with

boolean

Whether form is currently being submitted

(field: keyof T, value: any) => void

Update a field value

(field: keyof T) => void

Mark a field as touched

(e?: React.FormEvent) => Promise<void>

Submit the form

() => void

Reset form to initial values

(field: keyof T, value: any) => void

Programmatically set a field value

Example

import { useForm } from '@/hooks/useForm';

interface ContactForm {
  name: string;
  email: string;
  message: string;
}

function ContactPage() {
  const { values, errors, touched, handleChange, handleSubmit } = useForm<ContactForm>({
    name: '',
    email: '',
    message: ''
  }, {
    validate: (values) => {
      const errors: any = {};
      if (!values.email.includes('@')) {
        errors.email = 'Invalid email';
      }
      if (values.message.length < 10) {
        errors.message = 'Message too short';
      }
      return errors;
    },
    onSubmit: async (values) => {
      await fetch('/api/contact', {
        method: 'POST',
        body: JSON.stringify(values)
      });
    }
  });

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={values.name}
        onChange={(e) => handleChange('name', e.target.value)}
      />
      {touched.name && errors.name && <span>{errors.name}</span>}
      {/* other fields */}
    </form>
  );
}

useFetch

Data fetching hook with loading, error states, and caching support.

Parameters

string

required

The URL to fetch data from

UseFetchOptions<T>

Fetch configuration options

Show properties

'GET' | 'POST' | 'PUT' | 'DELETE'

default:"'GET'"

HTTP method to use

any

Request body data

Record<string, string>

Additional headers to send

boolean

default:"true"

Whether to automatically fetch on mount

number

Interval in milliseconds to refetch data

(data: T) => void

Callback when fetch succeeds

(error: Error) => void

Callback when fetch fails

Return Value

T | null

The fetched data

Error | null

Error object if the fetch failed

boolean

Whether data is currently being fetched

boolean

Whether data is being revalidated in the background

() => Promise<void>

Manually trigger a refetch

(data: T) => void

Manually update the cached data

Example

import { useFetch } from '@/hooks/useFetch';

interface User {
  id: number;
  name: string;
  email: string;
}

function UserProfile({ userId }: { userId: number }) {
  const { data, error, isLoading } = useFetch<User>(
    `/api/users/${userId}`
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  if (!data) return null;

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.email}</p>
    </div>
  );
}

import { useFetch } from '@/hooks/useFetch';

function Dashboard() {
  const { data, refetch } = useFetch('/api/stats', {
    refetchInterval: 30000, // Refetch every 30 seconds
    onSuccess: (data) => {
      console.log('Stats updated:', data);
    },
    onError: (error) => {
      console.error('Failed to fetch stats:', error);
    }
  });

  return (
    <div>
      <button onClick={refetch}>Refresh</button>
      {/* render stats */}
    </div>
  );
}

import { useFetch } from '@/hooks/useFetch';

function CreatePost() {
  const [title, setTitle] = useState('');
  
  const { data, isLoading, refetch } = useFetch('/api/posts', {
    method: 'POST',
    body: { title },
    enabled: false // Don't fetch on mount
  });

  const handleSubmit = () => {
    refetch(); // Manually trigger the POST request
  };

  return (
    <div>
      <input value={title} onChange={(e) => setTitle(e.target.value)} />
      <button onClick={handleSubmit} disabled={isLoading}>
        Create Post
      </button>
    </div>
  );
}

useLocalStorage

Persists state to localStorage with automatic synchronization across tabs.

Parameters

string

required

The localStorage key to store the value under

required

Initial value if no stored value exists

UseLocalStorageOptions

Storage configuration options

Show properties

(value: T) => string

default:"JSON.stringify"

Custom serialization function

(value: string) => T

default:"JSON.parse"

Custom deserialization function

boolean

default:"true"

Sync changes across browser tabs

Return Value

The current stored value

(value: T | ((prev: T) => T)) => void

Update the stored value

() => void

Remove the value from localStorage

Example

import { useLocalStorage } from '@/hooks/useLocalStorage';

function ThemeToggle() {
  const [theme, setTheme] = useLocalStorage<'light' | 'dark'>(
    'theme',
    'light'
  );

  const toggleTheme = () => {
    setTheme(current => current === 'light' ? 'dark' : 'light');
  };

  return (
    <button onClick={toggleTheme}>
      Current theme: {theme}
    </button>
  );
}

import { useLocalStorage } from '@/hooks/useLocalStorage';

interface CartItem {
  id: string;
  quantity: number;
}

function ShoppingCart() {
  const [cart, setCart, removeCart] = useLocalStorage<CartItem[]>(
    'shopping-cart',
    []
  );

  const addItem = (item: CartItem) => {
    setCart(current => [...current, item]);
  };

  const clearCart = () => {
    removeCart();
  };

  return (
    <div>
      <p>Items in cart: {cart.length}</p>
      <button onClick={clearCart}>Clear Cart</button>
    </div>
  );
}

useDebounce

Debounces a value, useful for search inputs and performance optimization.

Parameters

required

The value to debounce

number

required

Delay in milliseconds before updating the debounced value

Return Value

The debounced value that updates after the specified delay

Example

import { useDebounce } from '@/hooks/useDebounce';
import { useFetch } from '@/hooks/useFetch';

function SearchUsers() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearch = useDebounce(searchTerm, 500);
  
  const { data, isLoading } = useFetch(
    `/api/users/search?q=${debouncedSearch}`,
    { enabled: debouncedSearch.length > 0 }
  );

  return (
    <div>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search users..."
      />
      {isLoading && <span>Searching...</span>}
      {/* render results */}
    </div>
  );
}

useMediaQuery

Responds to CSS media query changes for responsive design.

Parameters

string

required

CSS media query string (e.g., ‘(min-width: 768px)‘)

Return Value

boolean

Whether the media query currently matches

Example

import { useMediaQuery } from '@/hooks/useMediaQuery';

function ResponsiveLayout() {
  const isMobile = useMediaQuery('(max-width: 768px)');
  const isTablet = useMediaQuery('(min-width: 769px) and (max-width: 1024px)');
  const isDesktop = useMediaQuery('(min-width: 1025px)');

  return (
    <div>
      {isMobile && <MobileNav />}
      {isTablet && <TabletNav />}
      {isDesktop && <DesktopNav />}
    </div>
  );
}

​useAuth

​Parameters

​Return Value

​Example

​useForm

​Parameters

​Return Value

​Example

​useFetch

​Parameters

​Return Value

​Example

​useLocalStorage

​Parameters

​Return Value

​Example

​useDebounce

​Parameters

​Return Value

​Example

​useMediaQuery

​Parameters

​Return Value

​Example

useAuth

Parameters

Return Value

Example

useForm

Parameters

Return Value

Example

useFetch

Parameters

Return Value

Example

useLocalStorage

Parameters

Return Value

Example

useDebounce

Parameters

Return Value

Example

useMediaQuery

Parameters

Return Value

Example