@craft-native/react

React bindings for the Craft framework. Provides hooks to access native functionality in your React applications.

Installation

npm install @craft-native/react
# or
yarn add @craft-native/react
# or
pnpm add @craft-native/react

Usage

Core Hooks

useCraft

Access the Craft API:

import { useCraft } from '@craft-native/react';

function App() {
  const { craft, isReady } = useCraft();

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

  return <div>Craft is ready!</div>;
}

usePlatform

Get platform information:

import { usePlatform } from '@craft-native/react';

function PlatformInfo() {
  const { platform, loading } = usePlatform();

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

  return (
    <div>
      Platform: {platform?.platform}
      Version: {platform?.version}
    </div>
  );
}

useDeviceInfo

Get device information:

import { useDeviceInfo } from '@craft-native/react';

function DeviceInfo() {
  const { deviceInfo } = useDeviceInfo();

  return (
    <div>
      Model: {deviceInfo?.model}
      OS: {deviceInfo?.os_version}
    </div>
  );
}

UI Hooks

useToast

Show toast notifications:

import { useToast } from '@craft-native/react';

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

  return (
    <button onClick={() => showToast('Hello!', 'short')}>
      Show Toast
    </button>
  );
}

useHaptic

Trigger haptic feedback:

import { useHaptic } from '@craft-native/react';

function HapticButton() {
  const { haptic } = useHaptic();

  return (
    <button onClick={() => haptic('impact_medium')}>
      Tap Me
    </button>
  );
}

usePermission

Request permissions:

import { usePermission } from '@craft-native/react';

function CameraPermission() {
  const { granted, request, loading } = usePermission('camera');

  return (
    <div>
      {granted === null && (
        <button onClick={request} disabled={loading}>
          Request Camera Access
        </button>
      )}
      {granted && <div>Camera access granted!</div>}
      {granted === false && <div>Camera access denied</div>}
    </div>
  );
}

Window Management

useWindow

Manage the application window:

import { useWindow } from '@craft-native/react';

function WindowControls() {
  const { maximize, minimize, toggleFullscreen, isFullscreen } = useWindow();

  return (
    <div>
      <button onClick={maximize}>Maximize</button>
      <button onClick={minimize}>Minimize</button>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? 'Exit' : 'Enter'} Fullscreen
      </button>
    </div>
  );
}

System Integration

useTray

Manage system tray icon:

import { useTray } from '@craft-native/react';

function TrayManager() {
  const { create, setMenu } = useTray();

  useEffect(() => {
    create('/path/to/icon.png', 'My App');
    setMenu([
      { id: 'show', label: 'Show Window' },
      { id: 'quit', label: 'Quit', type: 'normal' },
    ]);
  }, []);

  return null;
}

useNotification

Send system notifications:

import { useNotification } from '@craft-native/react';

function NotificationExample() {
  const { send } = useNotification();

  const notify = () => {
    send({
      title: 'Hello!',
      body: 'This is a notification',
    });
  };

  return <button onClick={notify}>Notify</button>;
}

File System

useFileSystem

Interact with the file system:

import { useFileSystem } from '@craft-native/react';

function FileEditor() {
  const { readFile, writeFile, loading, error } = useFileSystem();
  const [content, setContent] = useState('');

  const load = async () => {
    const data = await readFile('/path/to/file.txt');
    setContent(data);
  };

  const save = async () => {
    await writeFile('/path/to/file.txt', content);
  };

  return (
    <div>
      <textarea value={content} onChange={(e) => setContent(e.target.value)} />
      <button onClick={load}>Load</button>
      <button onClick={save}>Save</button>
      {loading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
    </div>
  );
}

Database

useDatabase

Work with SQLite databases:

import { useDatabase } from '@craft-native/react';

function TodoList() {
  const { query, execute } = useDatabase('/path/to/db.sqlite');
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    loadTodos();
  }, []);

  const loadTodos = async () => {
    const results = await query('SELECT * FROM todos');
    setTodos(results);
  };

  const addTodo = async (title: string) => {
    await execute('INSERT INTO todos (title) VALUES (?)', [title]);
    await loadTodos();
  };

  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

HTTP Requests

useHttp

Make HTTP requests:

import { useHttp } from '@craft-native/react';

function ApiExample() {
  const { fetch, loading } = useHttp();
  const [data, setData] = useState(null);

  const loadData = async () => {
    const result = await fetch('https://api.example.com/data');
    setData(result);
  };

  return (
    <div>
      <button onClick={loadData} disabled={loading}>
        Load Data
      </button>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
}

Event Handling

useCraftEvent

Listen to Craft events:

import { useCraftEvent } from '@craft-native/react';

function EventListener() {
  useCraftEvent('app.ready', () => {
    console.log('App is ready!');
  });

  useCraftEvent('window.close', () => {
    console.log('Window is closing');
  });

  return <div>Listening to events...</div>;
}

Utility Hooks

useIsMobile

Check if running on mobile:

import { useIsMobile } from '@craft-native/react';

function ResponsiveComponent() {
  const isMobile = useIsMobile();

  return <div>{isMobile ? 'Mobile View' : 'Desktop View'}</div>;
}

useIsDesktop

Check if running on desktop:

import { useIsDesktop } from '@craft-native/react';

function DesktopOnly() {
  const isDesktop = useIsDesktop();

  if (!isDesktop) return null;

  return <div>Desktop-only features</div>;
}

API Reference

See the TypeScript definitions for complete API documentation.

License

MIT