@onflow/react-sdk

The easiest way to build React apps on Flow. A lightweight, TypeScript-first library that makes Flow blockchain interactions feel native to React development.

🚀 Quick to setup – One provider, minimal configuration
⚡ Built for performance – Powered by TanStack Query for optimal caching
🎨 Styled beautifully – Tailwind-based components that match your design
🔗 Cross-VM ready – Seamlessly bridge between Cadence and Flow EVM

Quick Start

1. Install

_10

npm install @onflow/react-sdk

2. Wrap Your App

_25

import React from "react"

_25

import App from "./App"

_25

import { FlowProvider } from "@onflow/react-sdk"

_25

import flowJSON from "../flow.json"

_25

_25

function Root() {

_25

return (

_25

<FlowProvider

_25

config={{

_25

accessNodeUrl: "https://access-mainnet.onflow.org",

_25

flowNetwork: "mainnet",

_25

appDetailTitle: "My On Chain App",

_25

appDetailIcon: "https://example.com/icon.png",

_25

appDetailDescription: "A decentralized app on Flow",

_25

appDetailUrl: "https://myonchainapp.com",

_25

}}

_25

flowJson={flowJSON}

_25

darkMode={false}

_25

>

_25

<App />

_25

</FlowProvider>

_25

)

_25

}

_25

_25

export default Root

Next.js Users

Place the FlowProvider inside your layout.tsx. Since React hooks must run on the client, you may need to wrap the provider in a separate file that begins with 'use client' to avoid issues with server-side rendering.

3. Start Building

_18

import { useFlowCurrentUser, Connect, useFlowQuery } from "@onflow/react-sdk"

_18

_18

function MyApp() {

_18

const { user } = useFlowCurrentUser()

_18

_18

const { data: greeting } = useFlowQuery({

_18

cadence: `access(all) fun main(): String { return "Hello, Flow!" }`,

_18

args: (arg, t) => [],

_18

})

_18

_18

return (

_18

<div>

_18

<Connect />

_18

{user?.loggedIn && <p>Welcome, {user.addr}!</p>}

_18

<p>{greeting}</p>

_18

</div>

_18

)

_18

}

Live Demo

---

What's Included

🎣 Hooks

Cadence Hooks for native Flow interactions:

• Authentication & user management
• Account details & balances
• Block & transaction queries
• Real-time event subscriptions
• Script execution & mutations

Cross-VM Hooks for bridging Cadence ↔ Flow EVM:

• Atomic batch transactions
• Token & NFT bridging
• Cross-chain balance queries

→ View all hooks

🎨 Components

Beautiful, accessible UI components:

• <Connect /> – Wallet authentication with balance display
• <TransactionButton /> – Smart transaction execution
• <TransactionDialog /> – Real-time transaction tracking
• <TransactionLink /> – Network-aware block explorer links

→ View all components

---

Why Choose React SDK?

Developer Experience First

• TypeScript-native with full type safety
• Familiar React patterns and conventions
• Comprehensive error handling and loading states

Production Ready

• Built on battle-tested libraries (TanStack Query, Tailwind CSS)
• Automatic retries, caching, and background updates
• Cross-VM support for hybrid Cadence/EVM applications

Customizable

• Theme system for brand consistency
• Composable hooks for custom UI
• Dark mode support out of the box

---

Need Help?

• 📖 Hooks Documentation – Detailed API reference for all hooks
• 🎨 Components Documentation – UI components and theming guide
• 🔗 Configuration Guide – Learn about configuring flow.json