@edge-markets/connect-link 1.0.3 → 1.3.0

package/README.md

@@ -94,10 +94,12 @@ interface EdgeLinkConfig {
   onEvent?: (event) => void     // Called for analytics events
   scopes?: EdgeScope[]          // Scopes to request (default: all)
   linkUrl?: string              // Custom Link URL (dev only)
-  redirectUri?: string          // Custom redirect URI
+  redirectUri?: string          // Custom redirect URI (default: window.location.origin + '/oauth/edge/callback')
 }
 ```
 
+The `redirectUri` is automatically set to `${window.location.origin}/oauth/edge/callback` if not provided.
+
 ## Callbacks
 
 ### onSuccess
@@ -179,7 +181,55 @@ const link = new EdgeLink({
 })
 ```
 
-## React Example
+## React Hook
+
+The recommended way to use EdgeLink in React:
+
+```tsx
+import { useEdgeLink } from '@edge-markets/connect-link'
+
+function ConnectButton() {
+  const { open, ready, isOpen, error } = useEdgeLink({
+    clientId: process.env.NEXT_PUBLIC_EDGE_CLIENT_ID!,
+    environment: 'staging',
+    onSuccess: async (result) => {
+      await fetch('/api/edge/exchange', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(result),
+      })
+    },
+    onExit: (metadata) => {
+      if (metadata.reason === 'popup_blocked') {
+        alert('Please allow popups')
+      }
+    },
+  })
+
+  if (error) {
+    return <div>Error: {error.message}</div>
+  }
+
+  return (
+    <button onClick={() => open()} disabled={!ready || isOpen}>
+      {isOpen ? 'Connecting...' : 'Connect EdgeBoost'}
+    </button>
+  )
+}
+```
+
+### Hook Return Values
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `open` | `(options?) => void` | Opens the Link popup |
+| `ready` | `boolean` | True when EdgeLink is initialized |
+| `isOpen` | `boolean` | True when popup is open |
+| `error` | `Error \| null` | Initialization or runtime error |
+
+## Manual React Example
+
+For more control, you can use EdgeLink directly:
 
 ```tsx
 import { useEffect, useRef, useCallback } from 'react'
@@ -197,7 +247,6 @@ function ConnectButton() {
           method: 'POST',
           body: JSON.stringify(result),
         })
-        // Refresh user state
       },
       onExit: (metadata) => {
         if (metadata.reason === 'popup_blocked') {
@@ -269,3 +318,9 @@ function ConnectButton() {
 MIT
 
 
+
+
+
+
+
+