JSPM

README.md

# Tauri React Sqlite

A React context provider and adapter for using Drizzle ORM with Tauri SQLite plugin.
Provides seamless database integration for Tauri desktop applications with React.

## Features

- 🚀 **Zero-config** setup for Tauri + Drizzle ORM
- ⚡ **React Context** for easy database access
- 🔄 **Auto-reconnection** functionality
- 📊 **Loading & error states** built-in
- 🦾 **TypeScript** support
- 🔍 **ReturningId()** for immediate inserted data access

Peer Dependencies

Make sure you also have these installed in your project:

npm install react drizzle-orm @tauri-apps/plugin-sql @libsql/client

Quick Start

1. Setup Database Provider

// main.tsx or App.tsx
import { DatabaseProvider } from "tauri-react-sqlite";
import * as schema from "./db/schema";

function App() {
  return (
    <DatabaseProvider
      options={{
        schema,
        logger: true,
        dbPath: "sqlite:app.db",
      }}
      onReady={(db) => console.log("Database connected!")}
      onError={(error) => console.error("Database error:", error)}
    >
      <YourApp />
    </DatabaseProvider>
  );
}

2. Use in Components

import { useDatabase } from "tauri-react-sqlite";
import { users } from "../db/schema";
import { eq } from "drizzle-orm";

function UserList() {
  const { db, isLoading, error, reconnect } = useDatabase();

  // ... component code
}

3. ReturningId Utility

⚠️ Note: Id must be a number, since SQLite only supports returningId for numeric IDs

import { returningId } from "tauri-react-sqlite";

const newId = returningId(await db.insert(users).values(userData));

API Reference

DatabaseProvider Props

TypeScript Note

TypeScript support is included, but you may need type assertions in some cases:

const result = await db.select().from(users);