Sendbird UIKit for React

The ContextMenu component is used to create dynamic menus that appear in response to user actions. It allows you to present a list of interactive options (defined via MenuItems and MenuItem) to the user in a flexible way.

import ContextMenu, { MenuItems, MenuItem } from '@sendbird/uikit-react/ui/ContextMenu';

The Message module is a robust system designed to handle complex message types in Sendbird UIKit. It is intended to eventually replace older, simpler message components in UIKit v4.

The module follows a hierarchical structure where a base Message can be specialized into several types:

• UserMessage: Designed for standard user interactions. It can contain:
  • Simple Text
  • Mentions
  • OGMessage (Open Graph messages)
  • Sub-components like NotificationMessage or TemplateMessage
• FileMessage: Designed for media and attachments. It includes:
  • ThumbnailMessage (for images or videos)
  • VoiceMessage
  • Standard FileMessage (for other file types)
• AdminMessage: Specialized messages for administrative actions.

Reducers in this project are pure functions that take the current state and an action to return a new state object without mutating the original state.

Recommendations:

• Use built-in React hooks like useState for simple components.
• Use useReducer for more complex state logic.
• Move side effects into custom hooks rather than keeping them inside the reducer.
• Minimize external dependencies by sticking to standard React hooks.

The BottomSheet component presents content in a sliding panel from the bottom of the screen. It is ideal for mobile-responsive designs, such as displaying menus, selecting options, or showing information in a contained space without covering the entire screen.

import BottomSheet from '@sendbird/uikit-react/ui/BottomSheet';

The Sendbird context provides access to the global state and the mechanisms to update it. The store structure contains:

• stores: Contains sdkStore and userStore.
• dispatchers: Contains sdkDispatcher and userDispatcher.
• config: Contains userId, appId, accessToken, theme, and a nested config object containing logLevel.

You can access this store down the component hierarchy using the withSendbird Higher-Order Component (HOC).

{
  "stores": {
    "sdkStore": "...",
    "userStore": "..."
  },
  "dispatchers": {
    "sdkDispatcher": "...",
    "userDispatcher": "..."
  },
  "config": {
    "userId": "...",
    "appId": "...",
    "accessToken": "...",
    "theme": "...",
    "config": {
      "logLevel": "..."
    }
  }
}

The UIKit uses a Flux-based architecture powered by the useReducer hook. The core state—including the SDK instance, connection status, configuration, and user data—is managed in a global store provided via the SendbirdProvider (exported as <Sendbird />).

Key architectural components include:

• SmartComponents: Located in src/modules, these components are capable of accessing the global state and dispatching actions.
• ChannelList: A component that manages and displays a list of channels.
• Channel: A component (found in src/modules/Conversation) that manages and displays the messages within a specific channel.
• Dux-esque pattern: State modifications and access should follow a pattern found in /dux, where components are composed of an actionType, reducer, thunks, eventListeners, and initialState.

The Button component is a versatile element for triggering actions. It supports various configurations including:

• Types: Different levels of importance or actions (e.g., Secondary, Danger).
• Sizes: Different dimensions for fitting into various UI spaces (e.g., Big, Small).
• Disabled State: An option to indicate unavailable actions.
• Custom Labels: Ability to include custom text for the button action.

The Avatar component is used to display user profile images or initials. It supports custom dimensions and automatically handles fallback scenarios by displaying default avatars when no image source is provided. This component is ideal for enhancing user identity representation within your application.

import Avatar from '@sendbird/uikit-react/ui/Avatar';