React Adapter

Use Routier with React via hooks and bindings.

⚛️ See React Integration Live

Explore a working React example with `useQuery`, live queries, and reactive updates in CodeSandbox.

Open CodeSandbox Demo →

Quick Navigation

• Basic Example
• Getting Started with React

Example

Below is a minimal example using the useQuery hook.

import { useQuery } from "@routier/react";
import { useDataStore } from "./DexieStore"; // Your app's datastore hook/context

export function ProductsList() {
  const dataStore = useDataStore();

  const products = useQuery<Product[]>(
    (c) => dataStore.products.subscribe().toArray(c),
    [dataStore]
  );

  if (products.status === "pending") return <div>Loading…</div>;
  if (products.status === "error") return <div>Error loading products</div>;

  return (
    <ul>
      {products.data.map((p: any) => (
        <li key={p.id}>{p.name}</li>
      ))}
    </ul>
  );
}

Getting Started with React

• React Integration Overview - Full React guide with hooks and examples
• React Hooks - Learn about useQuery and other hooks
• Best Practices - Patterns and performance tips