SQLite

import { Callout } from 'fumadocs-ui/components/callout';

Provides native SQLite database access for robust offline data storage.

Overview

The SQLite plugin offers full SQL capabilities on the native device, allowing you to store and query structured data efficiently. It is ideal for offline-first applications, caching large datasets, and complex relational data.

Enterprise React Example

Use a custom hook to manage database connections and execute queries in your Next.js application.

import React, { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}

export default function UserDatabase() {
  const [users, setUsers] = useState<User[]>([]);
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function initDB() {
      await window.easycord.sqlite.open('users.db');
      await window.easycord.sqlite.executeSql(
        'CREATE TABLE IF NOT EXISTS users (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT, email TEXT)'
      );
      setIsReady(true);
      fetchUsers();
    }
    initDB();
  }, []);

  const fetchUsers = async () => {
    const result = await window.easycord.sqlite.executeSql('SELECT * FROM users');
    setUsers(result.rows);
  };

  const addUser = async () => {
    await window.easycord.sqlite.executeSql(
      'INSERT INTO users (name, email) VALUES (?, ?)',
      ['Jane Doe', 'jane@example.com']
    );
    fetchUsers();
  };

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

  return (
    <div className="p-4">
      <button onClick={addUser} className="mb-4 px-4 py-2 bg-blue-500 text-white rounded">
        Add User
      </button>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} - {user.email}</li>
        ))}
      </ul>
    </div>
  );
}