@pipedream/connect-react 1.3.3 → 1.5.0

package/README.md

@@ -153,9 +153,64 @@ type ComponentFormProps = {
   sdkResponse: unknown[] | unknown | undefined;
   /** Whether to show show errors in the form. Requires sdkErrors to be set. */
   enableDebugging?: boolean;
+  /** OAuth app ID configuration for specific apps.
+   * Maps app name slugs to their corresponding OAuth app IDs. */
+  oauthAppConfig?: Record<string, string>;
 };
 ```
 
+### OAuth App Configuration
+
+To connect to an OAuth app using your own OAuth client, you can specify custom OAuth app IDs for each app using the `oauthAppConfig` prop:
+
+```tsx
+const oauthAppConfig = {
+  github: "oa_xxxxxxx",
+  google_sheets: "oa_xxxxxxx",
+  slack: "oa_xxxxxxx",
+};
+
+<ComponentFormContainer
+  userId={userId}
+  componentKey="slack-send-message-to-channel"
+  configuredProps={configuredProps}
+  onUpdateConfiguredProps={setConfiguredProps}
+  oauthAppConfig={oauthAppConfig}
+/>;
+```
+
+This allows you to use your own OAuth applications for specific integrations, providing better control over branding and permissions. Read how to configure OAuth clients in Pipedream here: [https://pipedream.com/docs/connect/managed-auth/oauth-clients](https://pipedream.com/docs/connect/managed-auth/oauth-clients).
+
+**Note**: OAuth app IDs are not sensitive, and are safe to expose in the client.
+
+### App Sorting and Filtering
+
+When using the `SelectApp` component or `useApps` hook, you can control how apps are sorted and filtered:
+
+```tsx
+<SelectApp
+  value={selectedApp}
+  onChange={setSelectedApp}
+  appsOptions={{
+    sortKey: "featured_weight", // Sort by: "name" | "featured_weight" | "name_slug"
+    sortDirection: "desc", // "asc" | "desc"
+    hasActions: true, // Only show apps with actions
+    hasTriggers: false, // Exclude apps with triggers
+  }}
+/>
+```
+
+The `useApps` hook accepts the same options:
+
+```tsx
+const { apps, isLoading } = useApps({
+  q: "slack", // Search query
+  sortKey: "featured_weight",
+  sortDirection: "desc",
+  hasActions: true,
+});
+```
+
 ## Customization
 
 Style individual components using the `CustomizeProvider` and a `CustomizationConfig`.
@@ -164,7 +219,7 @@ Style individual components using the `CustomizeProvider` and a `CustomizationCo
 <FrontendClientProvider client={client}>
   <CustomizeProvider {...customizationConfig}>
     <ComponentFormContainer
-      key="slack-send-message"
+      key="slack-send-message-to-channel"
       configuredProps={configuredProps}
       onUpdateConfiguredProps={setConfiguredProps}
     />
@@ -427,7 +482,7 @@ customization options available.
 - `useFrontendClient` — _allows use of provided Pipedream frontendClient_
 - `useAccounts` — _react-query wrapper to list Pipedream connect accounts (for app, external user, etc.)_
 - `useApp` — _react-query wrapper to retrieve a Pipedream app_
-- `useApps` — _react-query wrapper to list Pipedream apps_
+- `useApps` — _react-query wrapper to list Pipedream apps with support for sorting and filtering_
 - `useComponent` — _react-query wrapper to retrieve a Pipedream component (action or trigger)_
 - `useComponents` — _react-query wrapper to list Pipedream components (actions or triggers)_