farcasterxyz · gskril · Dec 14, 2024 · Dec 22, 2024 · Dec 22, 2024 · Dec 22, 2024
diff --git a/packages/frame-react/README.md b/packages/frame-react/README.md
@@ -0,0 +1,80 @@
+# Frame React
+
+A React context provider and hook that make it easier to build Farcaster frames.
+
+## Install
+
+Install using your favorite package manager:
+
+```bash
+npm install @farcaster/frame-react @farcaster/frame-sdk
+```
+
+## Usage
+
+Basic implementation in a Next.js app (assumes you've already added [@farcaster/frame-wagmi-connector](https://www.npmjs.com/package/@farcaster/frame-wagmi-connector) to `wagmiConfig`):
+
+```tsx
+// ClientProviders.tsx
+'use client'
+
+import { FrameProvider } from '@farcaster/frame-react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+
+import { wagmiConfig } from '@/lib/web3'
+
+const queryClient = new QueryClient()
+
+export function ClientProviders({ children }: { children: React.ReactNode }) {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <FrameProvider>{children}</FrameProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}
+```
+
+Wrap the entire app (`layout.tsx`), or just the frame routes, in our new provider:
+
+```tsx
+import type { Metadata } from 'next'
+
+import { ClientProviders } from '@/components/ClientProviders'
+
+export const metadata: Metadata = {
+  title: 'Farcaster Frames v2 Demo',
+  description: 'A Farcaster Frames v2 demo app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <ClientProviders>{children}</ClientProviders>
+      </body>
+    </html>
+  )
+}
+```
+
+Then from any client component:
+
+```tsx
+// page.tsx
+'use client'
+
+import { useFrame } from '@farcaster/frame-react'
+
+export default function Page() {
+  const frameContext = useFrame()
+
+  return <div>Hello {frameContext?.user.username}</div>
+}
+```
diff --git a/packages/frame-react/package.json b/packages/frame-react/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "@farcaster/frame-react",
+  "version": "0.0.1",
+  "main": "dist/index.js",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "prebuild": "npm run clean",
+    "build": "tsc",
+    "typecheck": "tsc --noEmit"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "devDependencies": {
+    "@farcaster/tsconfig": "*",
+    "@types/react": "^18.3.12",
+    "react": "^18.3.1",
+    "typescript": "^5.6.3"
+  },
+  "peerDependencies": {
+    "@farcaster/frame-sdk": "^0.0.20",
+    "react": ">=18.0.0"
+  }
+}
diff --git a/packages/frame-react/src/context.tsx b/packages/frame-react/src/context.tsx
@@ -0,0 +1,33 @@
+import { createContext, useContext, useEffect, useState } from 'react'
+import frameSDK from '@farcaster/frame-sdk'
+import type { FrameContext, ReadyOptions } from '@farcaster/frame-core'
+
+interface FrameProviderProps {
+  children: React.ReactNode
+  config?: ReadyOptions
+}
+
+const Context = createContext<FrameContext | undefined>(undefined)
+
+export function FrameProvider({ children, config }: FrameProviderProps) {
+  const [isFrameSDKLoaded, setIsFrameSDKLoaded] = useState(false)
+  const [context, setContext] = useState<FrameContext>()
+
+  useEffect(() => {
+    const load = async () => {
+      setContext(await frameSDK.context)
+      frameSDK.actions.ready(config)
+    }
+
+    if (frameSDK && !isFrameSDKLoaded) {
+      setIsFrameSDKLoaded(true)
+      load()
+    }
+  }, [isFrameSDKLoaded])
+
+  return <Context.Provider value={context}>{children}</Context.Provider>
+}
+
+export function useFrame() {
+  return useContext(Context)
+}
diff --git a/packages/frame-react/src/index.ts b/packages/frame-react/src/index.ts
@@ -0,0 +1 @@
+export * from './context'
diff --git a/packages/frame-react/tsconfig.json b/packages/frame-react/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "@farcaster/tsconfig/browser.json",
+  "include": ["src"],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "outDir": "dist",
+    "jsx": "preserve"
+  }
+}