React hooks

warning

@credo-ts/react-hooks 0.6.1, the latest release, requires Credo 0.5 (@credo-ts/core@^0.5.0) and hasn't been updated for later versions of Credo.

@credo-ts/react-hooks exposes the DIDComm records of a Credo agent, such as connections, credential exchanges and proof exchanges, as React hooks that update when the records change.

Install

npm install @credo-ts/react-hooks@0.6.1 @credo-ts/question-answer@^0.5

@credo-ts/question-answer is a peer dependency.

Use the hooks

Wrap your app in AgentProvider and pass it an initialized agent:

import type { Agent } from '@credo-ts/core'
import AgentProvider from '@credo-ts/react-hooks'

export function App({ agent }: { agent: Agent }) {
  return <AgentProvider agent={agent}>{/* your app */}</AgentProvider>
}

Inside the provider, useAgent() returns { agent, loading }, and the record hooks return the records and a loading flag:

import { useConnections } from '@credo-ts/react-hooks'

function ConnectionList() {
  const { records: connections, loading } = useConnections()

  return <FlatList data={connections} renderItem={({ item }) => <ConnectionItem connection={item} />} />
}

useConnections, useCredentials, useProofs and useBasicMessages each have variants that select records, such as useConnectionById(id), useCredentialByState(state) and useProofsByConnectionId(connectionId). See the package source for the full list.