Hooks API Reference

Complete reference for all React hooks in the Sofondo Framework.

Installation

npm install @sofondo/react

Usage

Import hooks from @sofondo/react:

import { useConfig, useTheme, useToast } from '@sofondo/react';

useConfig()

Access the complete Sofondo configuration.

Returns: ResolvedConfig

Example:

const config = useConfig();
const isDarkMode = config.theme.defaultMode === 'dark';

Throws: Error if used outside ConfigProvider

useConfigSection(section)

Access a specific configuration section.

Parameters:

• section: keyof ResolvedConfig - Configuration section name

Returns: Configuration section

Example:

const themeConfig = useConfigSection('theme');
const sidebarConfig = useConfigSection('sidebar');

useTheme()

Access and control the theme.

Returns:

{
  theme: 'light' | 'dark';
  mode: 'light' | 'dark' | 'system';
  setMode: (mode: ThemeMode) => void;
  toggleTheme: () => void;
}

Example:

const { theme, mode, setMode, toggleTheme } = useTheme();

// Set specific mode
setMode('dark');

// Toggle through modes: light → dark → system → light
toggleTheme();

useToast()

Add toast notifications.

Returns:

{
  addToast: (
    message: string,
    type?: 'info' | 'success' | 'warning' | 'error',
    duration?: number
  ) => void;
}

Example:

const { addToast } = useToast();

addToast('Settings saved!', 'success');
addToast('Error occurred', 'error', 10000);

useMediaQuery(query)

Subscribe to media query changes.

Parameters:

• query: string - Media query string

Returns: boolean - Whether query matches

Example:

const isMobile = useMediaQuery('(max-width: 768px)');
const isDark = useMediaQuery('(prefers-color-scheme: dark)');

useLocalStorage(key, initialValue)

Persist state in localStorage.

Parameters:

• key: string - Storage key
• initialValue: T - Initial value

Returns: [T, (value: T) => void] - Value and setter

Example:

const [name, setName] = useLocalStorage('username', '');

useDebounce(value, delay)

Debounce a value.

Parameters:

• value: T - Value to debounce
• delay: number - Delay in milliseconds

Returns: T - Debounced value

Example:

const [searchTerm, setSearchTerm] = useState('');
const debouncedSearch = useDebounce(searchTerm, 500);

useEffect(() => {
  // API call with debounced value
}, [debouncedSearch]);

useClickOutside(ref, handler)

Detect clicks outside an element.

Parameters:

• ref: RefObject<HTMLElement> - Element ref
• handler: () => void - Callback function

Example:

const menuRef = useRef<HTMLDivElement>(null);
useClickOutside(menuRef, () => setIsOpen(false));

useCopyToClipboard()

Copy text to clipboard.

Returns:

{
  copy: (text: string) => Promise<boolean>;
  copied: boolean;
}

Example:

const { copy, copied } = useCopyToClipboard();

<button onClick={() => copy('Hello!')}>
  {copied ? 'Copied!' : 'Copy'}
</button>