Components

Recommended Approach: For most applications, use <EchoTokens /> as your primary component. It handles the complete user lifecycle including authentication, balance display, token purchases, and sign-out functionality in a single, polished interface.

EchoTokens

The <EchoTokens /> button component handles authentication, balance display, token purchases, and sign-out in one component.

import { EchoTokens } from '@merit-systems/echo-react-sdk';

// Complete user management - handles everything
<EchoTokens
  showAvatar={true} // Show user's profile picture
  onPurchaseComplete={balance => console.log('New balance:', balance)}
  onError={error => console.error('Error:', error)}
/>;

What EchoTokens Handles

Authentication: Shows sign-in button when user is not authenticated
Balance Display: Shows user's available credits (free tier + paid)
Token Purchases: Modal with purchase options and Stripe integration
Sign Out: Built-in sign-out button in the purchase modal
Avatar Support: Optional user profile picture display
Error Handling: Comprehensive error states and messaging

Usage Patterns

// Basic usage - handles everything automatically
<EchoTokens />

// With avatar and custom purchase amount
<EchoTokens
  showAvatar={true}
  amount={25} // Default purchase amount
/>

// Custom styling and callbacks
<EchoTokens
  className="my-tokens-button"
  showAvatar={true}
  onPurchaseComplete={(balance) => {
    console.log('Purchase successful!', balance);
    // Refresh your app state, show success message, etc.
  }}
  onError={(error) => {
    console.error('Operation failed:', error);
    // Handle errors, show user feedback, etc.
  }}
/>

// Custom button wrapper
<EchoTokens onPurchaseComplete={handlePurchase}>
  <button className="my-custom-credits-button">
    💎 Manage Credits
  </button>
</EchoTokens>

Props

import type { EchoTokensProps } from '@merit-systems/echo-react-sdk';

EchoTokensProps

Prop

Type

Individual Components

Most apps should use <EchoTokens /> instead - The individual components below are provided for advanced use cases where you need granular control. EchoTokens handles the complete user flow automatically.

EchoSignIn

Drop-in component for user authentication with customizable styling and callbacks.

import { EchoSignIn } from '@merit-systems/echo-react-sdk';

// Default styled button
<EchoSignIn
  onSuccess={(user) => console.log('Signed in:', user)}
  onError={(error) => console.error('Sign in failed:', error)}
/>

// Custom children (renders as clickable wrapper)
<EchoSignIn onSuccess={handleSuccess}>
  <button className="my-custom-button">
    Sign in with Echo
  </button>
</EchoSignIn>

Consider using <EchoTokens /> instead - It includes sign-in functionality plus balance management and token purchases in a single component.

Props

import type { EchoSignInProps } from '@merit-systems/echo-react-sdk';

Prop

Type

EchoSignOut

Component for user sign-out with customizable styling and callbacks.

import { EchoSignOut } from '@merit-systems/echo-react-sdk';

// Default styled button
<EchoSignOut
  onSuccess={() => console.log('Signed out successfully')}
  onError={(error) => console.error('Sign out failed:', error)}
/>

// Custom children (renders as clickable wrapper)
<EchoSignOut onSuccess={handleSignOut}>
  <button className="my-custom-signout-button">
    🚪 Sign Out
  </button>
</EchoSignOut>

Consider using <EchoTokens /> instead - It includes a sign-out button in the credits modal, providing a complete user management experience.

Props

import type { EchoSignOutProps } from '@merit-systems/echo-react-sdk';

Prop

Type

Logo

Echo logo component with customizable variants.

import { Logo } from '@merit-systems/echo-react-sdk';

<Logo
  width={24}
  height={24}
  variant="light" // or "dark"
/>;

Components

On this page