React Hooks

Seamless React integration with hooks for real-time queries, updates, and vector search. Build reactive applications with automatic state synchronization.

Quick Start

npm install columnist-db-hook

// Import hooks

import { useQuery, useCollection } from 'columnist-db-hook'

Getting Started

Installation

Install the React hooks package to enable real-time database integration in your React applications.

npm

npm install columnist-db-hook

yarn

yarn add columnist-db-hook

pnpm

pnpm add columnist-db-hook

Basic Usage

Integrate Columnist-DB with React using hooks for real-time data synchronization and reactive updates.

Setup Provider

import { ColumnistProvider } from 'columnist-db-hook' function App() { return ( <ColumnistProvider databaseName="my-app"> <YourApp /> </ColumnistProvider> ) }

Hook Reference

useQuery

Reactively query data from your database with automatic updates when data changes.

Basic Query

import { useQuery } from 'columnist-db-hook' function MemoriesList() { const { data, loading, error } = useQuery('memories', { tags: ['important'] }) if (loading) return <div>Loading...</div> if (error) return <div>Error: {error.message}</div> return ( <div> {data.map(memory => ( <div key={memory.id}>{memory.content}</div> ))} </div> ) }

Reactive Updates

function MemoryCounter() { const { data } = useQuery('memories') // Automatically updates when new memories are added return <div>Total memories: {data.length}</div> }

useCollection

Access and manipulate entire collections with real-time synchronization.

Collection Management

import { useCollection } from 'columnist-db-hook' function MemoriesManager() { const { data, insert, update, remove, loading } = useCollection('memories') const handleAddMemory = async () => { await insert({ id: 'mem_' + Date.now(), content: 'New memory', embeddings: [0.1, 0.2, 0.3], tags: ['new'] }) } return ( <div> <button onClick={handleAddMemory}>Add Memory</button> {data.map(memory => ( <div key={memory.id}> {memory.content} <button onClick={() => remove(memory.id)}>Delete</button> </div> ))} </div> ) }

useSearch

Perform real-time vector and text searches with reactive results.

Vector Search

import { useSearch } from 'columnist-db-hook' function SearchComponent() { const [query, setQuery] = useState('') const { results, loading } = useSearch('memories', { query, vector: [0.1, 0.2, 0.3], similarityThreshold: 0.7 }) return ( <div> <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search memories..." /> {loading && <div>Searching...</div>} {results.map(result => ( <div key={result.id}>{result.content}</div> ))} </div> ) }

Real-time Similarity Search

function SimilarMemories({ vector }) { const { results } = useSearch('memories', { vector, type: 'similarity', threshold: 0.8 }) // Automatically updates when new similar memories are added return ( <div> <h3>Similar Memories</h3> {results.map(memory => ( <div key={memory.id}>{memory.content}</div> ))} </div> ) }

useDatabase

Access the database instance directly for advanced operations.

Direct Database Access

import { useDatabase } from 'columnist-db-hook' function AdvancedOperations() { const db = useDatabase() const handleComplexOperation = async () => { // Perform complex database operations const result = await db.transaction(async (tx) => { const memories = await tx.query('memories') // ... complex logic return memories }) } return ( <button onClick={handleComplexOperation}> Perform Complex Operation </button> ) }

Real-time Updates

Automatic synchronization when data changes. Your components update instantly without manual refresh.

Type Safety

Full TypeScript support with inferred types from your database schema and queries.

Performance Optimized

Efficient re-renders with smart dependency tracking and minimal overhead for vector operations.