Skip to main content

Hooks

This document provides detailed documentation for the React hooks available in the xbees-connect-react package.

useReadyEffect​

The useReadyEffect hook is used to notify the x-bees iframe that it has been initialized. This is typically used when your application is ready to communicate with the x-bees platform.

import { useReadyEffect } from '@wildix/xbees-connect-react';

function MyComponent() {
  useReadyEffect();
  // ... rest of your component
}

This hook internally calls Client.getInstance().ready() which sends a ready event to the parent window. This is essential for establishing communication between your application and the x-bees platform.

useSearchParams​

The useSearchParams hook provides access to the URL search parameters of the current window location.

import { useSearchParams } from '@wildix/xbees-connect-react';

function MyComponent() {
  const searchParams = useSearchParams();
  // Access parameters like: searchParams.get('paramName')
}

This hook is useful for retrieving URL parameters that might be passed to your application by the x-bees platform.

useViewPortEffect​

The useViewPortEffect hook manages the viewport size communication with the x-bees platform. It automatically updates the parent window about the preferred viewport size and handles window resize events.

import { useViewPortEffect } from '@wildix/xbees-connect-react';

function MyComponent() {
  useViewPortEffect();
  // ... rest of your component
}

This hook:

  • Notifies x-bees about the preferred viewport size on mount
  • Listens to window resize events and updates the viewport size
  • Uses a ResizeObserver to detect changes in the document body size
  • Automatically cleans up event listeners and observers on unmount

useThemeEffect​

The useThemeEffect hook manages theme synchronization with the x-bees platform. It provides access to the current theme mode and theme object that can be used with Material-UI.

import { useThemeEffect } from '@wildix/xbees-connect-react';

function MyComponent() {
  const { mode, theme } = useThemeEffect();
  
  return (
    <ThemeProvider theme={theme}>
      {/* Your themed components */}
    </ThemeProvider>
  );
}

This hook:

  • Initializes with a default transparent background theme
  • Automatically fetches the current theme from x-bees on mount
  • Listens for theme changes from the x-bees platform
  • Merges the x-bees theme with default options
  • Returns both the theme mode ('light' | 'dark') and the complete theme object

Integration with Client​

All these hooks work in conjunction with the Client class from @wildix/xbees-connect. The Client class provides the core functionality for communication between your application and the x-bees platform.

For more detailed information about the Client class and its capabilities, refer to the Client documentation.