Merge pull request #1494 from onflow/mfbz/react-sdk-overview

Updated React SDK section with overview

Author: mfbz

docs/blockchain-development-tutorials/cadence/getting-started/building-a-frontend-app.md

@@ -459,7 +459,7 @@ For additional details and advanced usage, refer to the [@onflow/react-sdk docum
 [`useFlowQuery`]: ../../../build/tools/react-sdk#useflowquery
 [`useFlowMutate`]: ../../../build/tools/react-sdk#useflowmutate
 [Dev Wallet]: ../../../build/tools/flow-dev-wallet
-[@onflow/react-sdk documentation]: ../../../build/tools/react-sdk/index.md
-[**@onflow/react-sdk**]: ../../../build/tools/react-sdk/index.md
+[@onflow/react-sdk documentation]: ../../../build/tools/react-sdk
+[**@onflow/react-sdk**]: ../../../build/tools/react-sdk
 [Flow CLI]: ../../../build/tools/flow-cli/install.md
 [Cadence VSCode extension]: ../../../build/tools/vscode-extension

docs/blockchain-development-tutorials/cross-vm-apps/add-to-wagmi.md

@@ -517,4 +517,4 @@ For a complete reference implementation, check out the [FCL + RainbowKit + wagmi
 [Testnet Cadence Flowscan]: https://testnet.flowscan.io
 [Cadence Owned Accounts]: ../../build/cadence/basics/accounts.md
 [Testnet EVM Flowscan]: https://evm-testnet.flowscan.io
-[pre-built utility from the `@onflow/react-sdk`]: ../../build/tools/react-sdk/index.md#usecrossvmbatchtransaction
+[pre-built utility from the `@onflow/react-sdk`]: ../../build/tools/react-sdk#usecrossvmbatchtransaction

docs/build/tools/react-sdk/components.md

@@ -1,5 +1,5 @@
 ---
-title: 'Flow React SDK Components'
+title: 'Components'
 description: Reusable UI components for Flow interactions.
 sidebar_position: 3
 ---
@@ -8,6 +8,7 @@ import { Connect, TransactionDialog, TransactionLink, TransactionButton } from "
 import { FlowProvider } from "@onflow/react-sdk"
 import FlowProviderDemo from '@site/src/components/FlowProviderDemo';
 import TransactionDialogDemo from '@site/src/components/TransactionDialogDemo';
+import PlaygroundButton from '@site/src/components/PlaygroundButton';
 
 # React SDK Components
 
@@ -94,6 +95,8 @@ function MyComponent() {
 
 A drop-in wallet connection component with UI for copy address, logout, and balance display.
 
+<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#connect" /></div>
+
 **Props:**
 
 - `variant?: ButtonProps["variant"]` – Optional button style variant (default: `"primary"`)
@@ -128,6 +131,8 @@ import { Connect } from "@onflow/react-sdk"
 
 Button component for executing Flow transactions with built-in loading states and global transaction management.
 
+<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#transactionbutton" /></div>
+
 **Props:**
 
 - `transaction: Parameters<typeof mutate>[0]` – Flow transaction object to execute when clicked
@@ -180,6 +185,8 @@ const myTransaction = {
 
 Dialog component for real-time transaction status updates.
 
+<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#transactiondialog" /></div>
+
 **Props:**
 
 - `open: boolean` – Whether the dialog is open
@@ -216,6 +223,8 @@ import { TransactionDialog } from "@onflow/react-sdk"
 
 Link to the block explorer with the appropriate network scoped to transaction ID.
 
+<div style={{marginBottom: "1.5rem"}}><PlaygroundButton href="https://react.flow.com/#transactionlink" /></div>
+
 **Props:**
 
 - `txId: string` – The transaction ID to link to

docs/build/tools/react-sdk/hooks.md

@@ -1,9 +1,11 @@
 ---
-title: 'Flow React SDK Hooks'
+title: 'Hooks'
 description: React hooks for interacting with the Flow blockchain.
 sidebar_position: 2
 ---
 
+import PlaygroundButton from '@site/src/components/PlaygroundButton';
+
 # React SDK Hooks
 
 :::info
@@ -16,6 +18,8 @@ Many of these hooks are built using [`@tanstack/react-query`](https://tanstack.c
 
 ### `useFlowCurrentUser`
 
+<PlaygroundButton href="https://react.flow.com/#useflowcurrentuser" />
+
 ```tsx
 import { useFlowCurrentUser } from "@onflow/react-sdk"
 ```
@@ -53,6 +57,8 @@ function AuthComponent() {
 
 ### `useFlowAccount`
 
+<PlaygroundButton href="https://react.flow.com/#useflowaccount" />
+
 ```tsx
 import { useFlowAccount } from "@onflow/react-sdk"
 ```
@@ -91,6 +97,8 @@ function AccountDetails() {
 
 ### `useFlowBlock`
 
+<PlaygroundButton href="https://react.flow.com/#useflowblock" />
+
 ```tsx
 import { useFlowBlock } from "@onflow/react-sdk"
 ```
@@ -128,6 +136,8 @@ function LatestBlock() {
 
 ### `useFlowChainId`
 
+<PlaygroundButton href="https://react.flow.com/#useflowchainid" />
+
 ```tsx
 import { useFlowChainId } from "@onflow/react-sdk"
 ```
@@ -160,6 +170,8 @@ function ChainIdExample() {
 
 ### `useFlowClient`
 
+<PlaygroundButton href="https://react.flow.com/#useflowclient" />
+
 This hook returns the `FlowClient` for the current `<FlowProvider />` context.
 
 #### Parameters:
@@ -170,6 +182,8 @@ This hook returns the `FlowClient` for the current `<FlowProvider />` context.
 
 ### `useFlowConfig`
 
+<PlaygroundButton href="https://react.flow.com/#useflowconfig" />
+
 ```tsx
 import { useFlowConfig } from "@onflow/react-sdk"
 ```
@@ -193,6 +207,8 @@ function MyComponent() {
 
 ### `useFlowEvents`
 
+<PlaygroundButton href="https://react.flow.com/#useflowevents" />
+
 ```tsx
 import { useFlowEvents } from "@onflow/react-sdk"
 ```
@@ -227,6 +243,8 @@ function EventListener() {
 
 ### `useFlowQuery`
 
+<PlaygroundButton href="https://react.flow.com/#useflowquery" />
+
 ```tsx
 import { useFlowQuery } from "@onflow/react-sdk"
 ```
@@ -269,6 +287,8 @@ function QueryExample() {
 
 ### `useFlowQueryRaw`
 
+<PlaygroundButton href="https://react.flow.com/#useflowqueryraw" />
+
 ```tsx
 import { useFlowQueryRaw } from "@onflow/react-sdk"
 ```
@@ -315,6 +335,8 @@ function QueryRawExample() {
 
 ### `useFlowMutate`
 
+<PlaygroundButton href="https://react.flow.com/#useflowmutate" />
+
 ```tsx
 import { useFlowMutate } from "@onflow/react-sdk"
 ```
@@ -366,6 +388,8 @@ function CreatePage() {
 
 ### `useFlowRevertibleRandom`
 
+<PlaygroundButton href="https://react.flow.com/#useflowrevertiblerandom" />
+
 ```tsx
 import { useFlowRevertibleRandom } from "@onflow/react-sdk"
 ```
@@ -427,6 +451,8 @@ function RandomValues() {
 
 ### `useFlowTransaction`
 
+<PlaygroundButton href="https://react.flow.com/#useflowtransaction" />
+
 ```tsx
 import { useFlowTransaction } from "@onflow/react-sdk"
 ```
@@ -467,6 +493,8 @@ function TransactionDetails({ txId }: { txId: string }) {
 
 ### `useFlowTransactionStatus`
 
+<PlaygroundButton href="https://react.flow.com/#useflowtransactionstatus" />
+
 ```tsx
 import { useFlowTransactionStatus } from "@onflow/react-sdk"
 ```
@@ -496,6 +524,8 @@ function TransactionStatusComponent() {
 
 ### `useDarkMode`
 
+<PlaygroundButton href="https://react.flow.com/#usedarkmode" />
+
 ```tsx
 import { useDarkMode } from "@onflow/react-sdk"
 ```
@@ -525,6 +555,8 @@ function ThemeAwareComponent() {
 
 ### `useCrossVmBatchTransaction`
 
+<PlaygroundButton href="https://react.flow.com/#usecrossvmbatchtransaction" />
+
 ```tsx
 import { useCrossVmBatchTransaction } from "@onflow/react-sdk"
 ```
@@ -620,6 +652,8 @@ function CrossVmBatchTransactionExample() {
 
 ### `useCrossVmTokenBalance`
 
+<PlaygroundButton href="https://react.flow.com/#usecrossvmtokenbalance" />
+
 ```tsx
 import { useCrossVmTokenBalance } from "@onflow/react-sdk"
 ```
@@ -684,6 +718,8 @@ function UseCrossVmTokenBalanceExample() {
 
 ### `useCrossVmSpendNft`
 
+<PlaygroundButton href="https://react.flow.com/#usecrossvmspendnft" />
+
 ```tsx
 import { useCrossVmSpendNft } from "@onflow/react-sdk"
 ```
@@ -757,6 +793,8 @@ function CrossVmSpendNftExample() {
 
 ### `useCrossVmSpendToken`
 
+<PlaygroundButton href="https://react.flow.com/#usecrossvmspendtoken" />
+
 ```tsx
 import { useCrossVmSpendToken } from "@onflow/react-sdk"
 ```
@@ -830,6 +868,8 @@ function CrossVmSpendTokenExample() {
 
 ### `useCrossVmTransactionStatus`
 
+<PlaygroundButton href="https://react.flow.com/#usecrossvmtransactionstatus" />
+
 ```tsx
 import { useCrossVmTransactionStatus } from "@onflow/react-sdk"
 ```