dexie-react-hooks

import React from 'react'; import { useLiveQuery } from 'dexie-react-hooks'; import Dexie from 'dexie'; // Define your Dexie database schema and class interface Todo { id?: number; title: string; completed: boolean; } class MyDatabase extends Dexie { todos!: Dexie.Table<Todo, number>; constructor() { super('MyTodoDatabase'); this.version(1).stores({ todos: '++id, title, completed' }); } } // Instantiate the database const db = new MyDatabase(); // React component using the useLiveQuery hook const TodoList: React.FC = () => { // useLiveQuery subscribes to changes in db.todos const todos = useLiveQuery( () => db.todos.toArray(), [] // Empty dependency array means the query function is stable; re-queries on DB changes. ); const addTodo = async () => { await db.todos.add({ title: `New Todo ${Date.now()}`, completed: false }); }; const toggleTodo = async (id: number) => { const todo = await db.todos.get(id); if (todo) { await db.todos.update(id, { completed: !todo.completed }); } }; if (!todos) return <div>Loading todos...</div>; // Data is null on first render until query resolves return ( <div> <h1>My Todos</h1> <button onClick={addTodo}>Add Todo</button> <ul> {todos.map(todo => ( <li key={todo.id}> <input type="checkbox" checked={todo.completed} onChange={() => toggleTodo(todo.id!)} /> <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}> {todo.title} </span> </li> ))} </ul> </div> ); }; export default TodoList;