The Connect component is a versatile UI element that handles the complete connection lifecycle for third-party integrations. It provides:

  • Initial connection authorization
  • Connection status display
  • Connection management options (re-authorization)
  • Responsive state handling with loading indicators
  • Customizable appearance and behavior
  • Support for both popup and redirect authorization flows

​
Installation

yarn add @runmorph/atoms

​
Usage

"use client"
import { Connect } from "@runmorph/atoms";

function MyConnectButton({ sessionToken }) {
    return <Connect sessionToken={sessionToken} />;
}

export default MyConnectButton;

​
Props

​
sessionToken
string
required

A sessionToken generated from your server with the create session method. This token is used to identify and manage the connection.

​
windowMode
popup|redirect
default:"popup"

Determines how the authorization window is opened: - popup: Opens the authorization URL in a new popup window (default) - redirect: Redirects the current window to the authorization URL When using redirect mode, the redirectUrl prop is required.

​
redirectUrl
string

The URL where the user will be redirected after authorization when using windowMode="redirect". Required when windowMode is set to redirect.

​
variant
string
default:"default"

The visual style variant of the button. Inherits from the underlying Button component. Common values include: default, outline, ghost, etc.

​
size
string
default:"default"

The size of the button. Inherits from the underlying Button component. Available options: default, sm, lg, etc.

​
className
string

Additional CSS classes to apply to the button for custom styling.

​
asChild
boolean

When true, the component will render its child as the root element instead of a button. Useful for custom implementations.

​
connectionCallbacks
object

​
States

The Connect component handles various states automatically:

  1. Loading: Shows a disabled button with loading text while initializing
  2. Unauthorized: Displays a “Connect” button to initiate authorization
  3. Authorized: Shows a “Connected” button with a dropdown menu for management options
  4. Error: Displays an error message if something goes wrong

​
Internationalization

The component supports internationalization through a translation context. All text strings can be customized by providing translations for the following keys:

  • connect.status.loading
  • connect.status.error
  • connect.status.authorized
  • connect.actions.connect
  • connect.actions.reauthorize