Skip to main content

Components

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

CopyInfoButton​

The CopyInfoButton component provides a clickable button that copies specified text to the clipboard using the x-bees platform's clipboard functionality.

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

function MyComponent() {
  return (
    <CopyInfoButton 
      value="Text to copy" 
      // Additional Material-UI icon props can be passed here
    />
  );
}

Props​

  • value (string, required): The text that will be copied to the clipboard when the button is clicked
  • Additional Material-UI icon props can be passed to customize the button's appearance

Features​

  • Uses the x-bees platform's toClipboard functionality through Client.getInstance().toClipboard()
  • Automatically handles the copy operation when clicked
  • Styled with a pointer cursor for better UX
  • Extends Material-UI icon props for customization

ThemeProvider​

The ThemeProvider component sets up the theme context for your application, integrating with both Material-UI and styled-components. It uses the useThemeEffect hook to synchronize with the x-bees platform's theme.

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

function App() {
  return (
    <ThemeProvider>
      {/* Your application components */}
    </ThemeProvider>
  );
}

Features​

  • Integrates Material-UI and styled-components theme providers
  • Automatically syncs with x-bees platform theme
  • Includes CssBaseline for consistent styling
  • Uses StyledEngineProvider with injectFirst to ensure proper style injection
  • Enables color scheme support through enableColorScheme

Implementation Details​

The component:

  1. Uses useThemeEffect hook to get the current theme
  2. Wraps the application in both Material-UI and styled-components theme providers
  3. Applies the theme consistently across both styling solutions
  4. Includes CssBaseline for consistent baseline styles
  5. Ensures proper style injection order with injectFirst

Integration with Client​

The ThemeProvider component works in conjunction with the Client class's theme-related functionality:

  • Uses getTheme() to fetch the current theme
  • Listens for theme changes through onThemeChange events
  • Supports both light and dark modes
  • Maintains theme consistency across the application

For more detailed information about theme management, refer to the useThemeEffect hook documentation and Client documentation.

Helpers

This section provides documentation for helper functions available in the xbees-connect-react package.

setViewport​

The setViewport helper function manages the communication of viewport dimensions to the x-bees platform. It efficiently updates the parent window about the current iframe dimensions while implementing caching to prevent unnecessary updates.

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

// Basic usage
setViewport();

// With offset
setViewport(20); // Adds 20px to the height

Parameters​

  • offset (number, optional): Additional height to add to the viewport height. Defaults to 0.

Features​

  • Automatically calculates the current viewport dimensions
  • Implements caching to prevent redundant updates
  • Uses Client.getInstance().setViewport() to communicate with the x-bees platform
  • Returns a Promise when the viewport is updated, or null if no update was needed

Implementation Details​

The function:

  1. Calculates the current height of the document body plus any provided offset
  2. Checks if the height has changed since the last update (using internal caching)
  3. If changed, calculates the current width of the document
  4. Updates the cache with the new height
  5. Sends the new dimensions to the x-bees platform via setViewport

Usage Example​

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

// Update viewport with additional padding
function updateViewportWithPadding() {
  setViewport(20); // Adds 20px padding to the height
}

// Update viewport when content changes
function onContentChange() {
  setViewport(); // Updates with current dimensions
}

Integration with Client​

The setViewport helper works in conjunction with the Client class's viewport-related functionality:

  • Uses Client.getInstance().setViewport() to send dimension updates
  • Integrates with the useViewPortEffect hook for automatic viewport management
  • Supports dynamic resizing of the iframe content