Using Sendbird Class Names for Desktop and Mobile Layouts

Sendbird Chat UIKit
, ,
1

Hi,

I’m currently integrating the Sendbird module components for building an inbox and conversation view in my application. I have two separate layouts for desktop and mobile views. I noticed that the Sendbird documentation provides specific class names (like sendbird-app__wrap and sendbird-app__conversation-wrap) for styling.

Here are some snippets from my code:

Desktop Layout:

import Conversation from '../../features/conversation';

const DesktopLayout = () => {
  return (
    <div className="sendbird-app__wrap">
      <Inbox />
      <div className="sendbird-app__conversation-wrap">
        <Conversation />
      </div>
    </div>
  );
};

export default DesktopLayout;

Mobile Layout:

import { useGetSelectedChannelFromURL } from '../../hooks/use-get-selected-channel-by-url';

const MobileLayout = () => {
  const selectedChannelID = useGetSelectedChannelFromURL();
  return (
    <div className="mobile-layout">
      {selectedChannelID ? (
        <div className={styles.conversationBox}>
          <Conversation />
        </div>
      ) : (
        <Inbox />
      )}
    </div>
  );
};

export default MobileLayout;

My question is:

  1. Do we need to use the specific Sendbird class names (sendbird-app__wrap, sendbird-app__conversation-wrap, etc.) to style the components as intended by Sendbird?**properly

  2. Is there any flexibility to customize these class names or should we strictly adhere to the provided ones for consistency and proper functioning?

  3. Are there any best practices or recommended approaches when using these modules for different layouts (desktop vs. mobile)?

Thank you in advance for your guidance!