Skip to main content

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​


_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

Create a client component wrapper for the FlowProvider:


_22
'use client';
_22
_22
import { FlowProvider } from '@onflow/react-sdk';
_22
import flowJSON from '../flow.json';
_22
_22
export 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:


_11
import FlowProviderWrapper from '@/components/FlowProviderWrapper';
_11
_11
export default function RootLayout({ children }) {
_11
return (
_11
<html>
_11
<body>
_11
<FlowProviderWrapper>{children}</FlowProviderWrapper>
_11
</body>
_11
</html>
_11
);
_11
}

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
}

🎣 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?​

Rate this page