Flow 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 Start
1. Install
_10npm install @onflow/react-sdk
2. Wrap Your App
_25import React from 'react';_25import App from './App';_25import { FlowProvider } from '@onflow/react-sdk';_25import flowJSON from '../flow.json';_25_25function 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_25export default Root;
Next.js Users
Create a client component wrapper for the FlowProvider:
_22'use client';_22_22import { FlowProvider } from '@onflow/react-sdk';_22import flowJSON from '../flow.json';_22_22export default function FlowProviderWrapper({ children }) {_22 return (_22 <FlowProvider_22 config={{_22 accessNodeUrl: 'https://access-mainnet.onflow.org',_22 flowNetwork: 'mainnet',_22 appDetailTitle: 'My On Chain App',_22 appDetailIcon: 'https://example.com/icon.png',_22 appDetailDescription: 'A decentralized app on Flow',_22 appDetailUrl: 'https://myonchainapp.com',_22 }}_22 flowJson={flowJSON}_22 >_22 {children}_22 </FlowProvider>_22 );_22}
Then use it in your layout.tsx:
_11import FlowProviderWrapper from '@/components/FlowProviderWrapper';_11_11export default function RootLayout({ children }) {_11 return (_11 <html>_11 <body>_11 <FlowProviderWrapper>{children}</FlowProviderWrapper>_11 </body>_11 </html>_11 );_11}
3. Start Building
_18import { useFlowCurrentUser, Connect, useFlowQuery } from '@onflow/react-sdk';_18_18function 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}
🎣 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
🎨 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
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