@convex-dev/react

@convex-dev/react

React hooks for updating components based on changed in the Convex Cloud. This package is a layer on top of @convex-dev/browser which allows binding to React components. For convenience, it re-exports all of @convex-dev/browser's exports too.

Convex is a platform for building dynamic applications without the complexity of managing a backend or interacting with a database. Data access functions run on the Convex Cloud platform and use the @convex-dev/server libraries to read and manipulate data. This package is used in frontend code to interact with these server-side functions.

Usage

Create a ConvexClient with the same approach as @convex-dev/browser. Then, instead of manually managing Query or Watch objects, seamlessly data bind with the useQuery hook.

import { ConvexClient } from "@convex-dev/react";

// Load the Convex config from its file inside your repository.
import convexConfig from "../convex.json";
const convex = new ConvexClient(convexConfig.origin):

export default function App() {
  const query = useQuery(convex.query("yourQuery"));
  // Render your component based on the query's return value.
}

See the Convex documentation to get started!

See Also

• @convex-dev/server is the library used by Convex server functions to interact with data.
• @convex-dev/browser is the layer below this package that provides a framework-independent SDK for data binding to Convex functions.
• @convex-dev/cli is the CLI tool for spinning up Convex backends and syncing functions.