LinchDesktopProvider

Overview

LinchDesktopProvider is the root Provider for Linch Desktop Core, responsible for:

Initializing i18n (internationalization)
Applying theme CSS variables
Initializing Sentry (if enabled)
Wrapping DatabaseProvider (if enabled)
Wrapping ErrorBoundary

Import

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

Props

interface LinchDesktopProviderProps {
  /**
   * Application configuration
   */
  config: Partial<LinchDesktopConfig>;

  /**
   * Children to render
   */
  children: ReactNode;
}

Basic Usage

import { LinchDesktopProvider } from '@linch-tech/desktop-core';
import { config } from './config';

function App() {
  return (
    <LinchDesktopProvider config={config}>
      <YourApp />
    </LinchDesktopProvider>
  );
}

With Routing

LinchDesktopProvider should wrap the router component:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { LinchDesktopProvider, Shell } from '@linch-tech/desktop-core';
import { config } from './config';

function App() {
  return (
    <LinchDesktopProvider config={config}>
      <BrowserRouter>
        <Routes>
          <Route element={<Shell />}>
            <Route path="/" element={<Home />} />
            <Route path="/settings" element={<Settings />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </LinchDesktopProvider>
  );
}

Initialization Order

The Provider initializes features in the following order:

i18n - Initialize internationalization, merge core and app translations
Theme - Apply theme CSS variables (colors, radius, fonts)
Sentry - If enabled, initialize error monitoring
Database - If enabled, initialize database and migrations

Provider Structure

LinchDesktopProvider
├── ConfigProvider (config context)
│   └── ErrorBoundary
│       └── DatabaseProvider (if enabled)
│           └── children

Accessing Configuration

Use the useConfig hook to access configuration in child components:

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

function MyComponent() {
  const config = useConfig();

  return (
    <div>
      <h1>{config.brand.name}</h1>
      <p>Version: {config.brand.version}</p>
    </div>
  );
}

Error Handling

ErrorBoundary automatically catches React errors in child components and displays a friendly error interface:

// If MyBuggyComponent throws an error, ErrorBoundary catches it and shows error info
<LinchDesktopProvider config={config}>
  <MyBuggyComponent />
</LinchDesktopProvider>

Notes

LinchDesktopProvider should only be used once in your application, at the top of the component tree.

If you need to use configuration outside the Provider (e.g., in route definitions), export the config as a separate module and import it where needed.

LinchDesktopProvider

On this page