metabuilder/docs/src/hooks

React Hooks

Overview

Custom React hooks for common functionality across the application.

Location

/src/hooks/

Available Hooks

useMobile

• File: use-mobile.ts
• Purpose: Detects mobile device viewport and provides responsive behavior
• Returns: Boolean indicating if device is mobile

useDBAL

• File: useDBAL.ts
• Purpose: Provides access to DBAL (Data Abstraction Layer) for database queries
• Returns: DBAL client instance with query methods

useKV

• File: useKV.ts
• Purpose: Key-value storage hook for component-level state or cached data
• Returns: Object with get/set/delete methods for key-value operations

Usage Examples

import { useMobile } from '@/hooks/use-mobile'
import { useDBAL } from '@/hooks/useDBAL'
import { useKV } from '@/hooks/useKV'

// Mobile detection
const isMobile = useMobile()

// Database access
const dbal = useDBAL()
const data = await dbal.query(...)

// Key-value storage
const kv = useKV()
kv.set('key', value)
const value = kv.get('key')

Related Documentation

• React Component Architecture