Database Hooks

React Hooks for database operations

useDatabaseInit

Hook to initialize the database.

import { useDatabaseInit } from '@linch-tech/desktop-core';

function App() {
  const { isReady, error } = useDatabaseInit();

  if (error) {
    return <div>Database initialization failed: {error.message}</div>;
  }

  if (!isReady) {
    return <div>Initializing database...</div>;
  }

  return <MainApp />;
}

Return Value

interface UseDatabaseInit {
  isReady: boolean;   // Whether database is ready
  error: Error | null; // Initialization error
}

Parameters

useDatabaseInit(options?: DatabaseInitOptions)

interface DatabaseInitOptions {
  name?: string;           // Database name (default: 'app.db')
  migrations?: Migration[]; // Migration list
}

Usually you don't need to call this Hook manually. LinchDesktopProvider handles database initialization automatically.

useSetting

Hook to read/write a single setting.

import { useSetting } from '@linch-tech/desktop-core';

function SettingsPage() {
  const { value, setValue, isLoading, error } = useSetting<string>('theme', {
    defaultValue: 'light',
  });

  if (isLoading) return <div>Loading...</div>;

  return (
    <select
      value={value ?? 'light'}
      onChange={(e) => setValue(e.target.value)}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
    </select>
  );
}

Return Value

interface UseSettingReturn<T> {
  value: T | null;                    // Current value
  setValue: (value: T) => Promise<void>; // Update value
  isLoading: boolean;                 // Whether loading
  error: Error | null;                // Error info
}

Parameters

useSetting<T>(key: string, options?: UseSettingOptions<T>)

interface UseSettingOptions<T> {
  defaultValue?: T;  // Default value
}

Examples

// Boolean setting
const { value: notifications, setValue: setNotifications } = useSetting<boolean>(
  'notifications',
  { defaultValue: true }
);

// JSON object setting
interface UserPreferences {
  fontSize: number;
  sidebarOpen: boolean;
}

const { value: prefs, setValue: setPrefs } = useSetting<UserPreferences>(
  'preferences',
  { defaultValue: { fontSize: 14, sidebarOpen: true } }
);

useAppState

Hook to persist UI state.

import { useAppState } from '@linch-tech/desktop-core';

function Sidebar() {
  const { state: isOpen, setState: setIsOpen, isLoading } = useAppState<boolean>(
    'sidebarOpen',
    true
  );

  if (isLoading) return null;

  return (
    <aside style={{ width: isOpen ? 200 : 50 }}>
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Collapse' : 'Expand'}
      </button>
    </aside>
  );
}

Return Value

interface UseAppStateReturn<T> {
  state: T | null;                     // Current state
  setState: (value: T) => Promise<void>; // Update state
  isLoading: boolean;                  // Whether loading
}

Parameters

useAppState<T>(key: string, defaultValue?: T)

useSetting vs useAppState

FeatureuseSettinguseAppState
PurposeUser preferencesUI state persistence
Storage tablesettingsapp_state
Typical usageTheme, language, notification togglesSidebar expanded, list sorting

Storage Format

Settings and state are stored as JSON in the SQLite database:

-- settings table
INSERT INTO settings (key, value) VALUES ('theme', '"dark"');

-- app_state table
INSERT INTO app_state (key, value) VALUES ('sidebarOpen', 'true');

Notes

These Hooks require features.database to be true (enabled by default).

Complex objects are automatically serialized/deserialized as JSON.