Sofondo
SofondoFrameworkDocs

React Hooks

Powerful custom hooks for common React patterns and functionality

These hooks follow React best practices and are designed to simplify common development patterns. All hooks are fully typed with TypeScript for excellent IDE support.

Installation

npm install @sofondo/react

useMediaQuery

Detect and respond to CSS media query changes in your React components.

Parameters

query: string- CSS media query string to match

Returns

boolean - true if the media query matches

Example Usage

import { useMediaQuery } from '@sofondo/react';

function ResponsiveComponent() {
  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 && <p>Mobile view</p>}
      {isTablet && <p>Tablet view</p>}
      {isDesktop && <p>Desktop view</p>}
    </div>
  );
}

useLocalStorage

Persist state in localStorage with a React hook interface.

Parameters

key: string- localStorage key
initialValue: T- Default value if key doesn't exist

Returns

[value, setValue] - State value and setter function

Example Usage

import { useLocalStorage } from '@sofondo/react';

function UserPreferences() {
  const [theme, setTheme] = useLocalStorage('theme', 'light');
  const [fontSize, setFontSize] = useLocalStorage('fontSize', 16);

  return (
    <div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme (Current: {theme})
      </button>
      <button onClick={() => setFontSize(fontSize + 2)}>
        Increase Font Size (Current: {fontSize}px)
      </button>
    </div>
  );
}

useDebounce

Delay updating a value until after a specified time has elapsed since the last change.

Parameters

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

Returns

T - Debounced value

Example Usage

import { useDebounce } from '@sofondo/react';
import { useState, useEffect } from 'react';

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');
  const debouncedSearchTerm = useDebounce(searchTerm, 500);

  useEffect(() => {
    if (debouncedSearchTerm) {
      // Perform search API call
      console.log('Searching for:', debouncedSearchTerm);
    }
  }, [debouncedSearchTerm]);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Search..."
    />
  );
}

useClickOutside

Detect clicks outside of a specific element, useful for dropdowns and modals.

Parameters

callback: Function- Function to call when clicking outside

Returns

ref - React ref to attach to the element

Example Usage

import { useClickOutside } from '@sofondo/react';
import { useState } from 'react';

function Dropdown() {
  const [isOpen, setIsOpen] = useState(false);
  const dropdownRef = useClickOutside(() => setIsOpen(false));

  return (
    <div ref={dropdownRef}>
      <button onClick={() => setIsOpen(!isOpen)}>
        Toggle Dropdown
      </button>
      {isOpen && (
        <div className="dropdown-menu">
          <div>Option 1</div>
          <div>Option 2</div>
          <div>Option 3</div>
        </div>
      )}
    </div>
  );
}

useCopyToClipboard

Copy text to clipboard with feedback on success or failure.

Returns

[copiedText, copy] - Last copied text and copy function

Example Usage

import { useCopyToClipboard } from '@sofondo/react';
import { useState } from 'react';

function CodeSnippet() {
  const [copiedText, copy] = useCopyToClipboard();
  const code = 'npm install @sofondo/react';

  return (
    <div>
      <pre>{code}</pre>
      <button onClick={() => copy(code)}>
        {copiedText === code ? 'Copied!' : 'Copy'}
      </button>
    </div>
  );
}

useToast

Display toast notifications from anywhere in your application.

Returns

{ showToast } - Function to display toast notifications

Example Usage

import { useToast } from '@sofondo/react';

function MyComponent() {
  const { showToast } = useToast();

  const handleSuccess = () => {
    showToast('Operation completed successfully!', 'success');
  };

  const handleError = () => {
    showToast('Something went wrong!', 'error');
  };

  const handleInfo = () => {
    showToast('Here is some information', 'info');
  };

  return (
    <div>
      <button onClick={handleSuccess}>Success Toast</button>
      <button onClick={handleError}>Error Toast</button>
      <button onClick={handleInfo}>Info Toast</button>
    </div>
  );
}

useTheme

Access and modify the current theme from the ThemeProvider.

Returns

{ theme, setTheme } - Current theme and theme setter

Example Usage

import { useTheme } from '@sofondo/react';

function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
      Current theme: {theme}
      Switch to {theme === 'light' ? 'dark' : 'light'} mode
    </button>
  );
}

Next Steps

Combine these hooks with Sofondo components and utilities to build powerful applications.