samples for group channel

App.jsx

# 1. Basic implementation
# In later examples, we wont show CSS & SendbirdProvider
import '@sendbird/uikit-react/dist/index.css';

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import Channel from '@sendbird/uikit-react/Channel';

const MY_CHANNEL_URL = '';
const MY_APP_ID = '';
const MY_USER_ID = '';

export const SimpleChannel = () => {
  return (
    <SendbirdProvider
      appId={MY_APP_ID}
      userId={MY_USER_ID}
    >
      {/* Channel should be always wrapped inside SendbirdProvider */}
      <Channel
        channelUrl={MY_CHANNEL_URL}
      />
    </SendbirdProvider>
  );
};

---

# 2. Customizing Loaders
# You can use renderPlaceholderLoader, renderPlaceholderEmpty, renderPlaceholderInvalid
# to render custom loading, empty and invalid screens

import Channel from '@sendbird/uikit-react/Channel';

const MY_CHANNEL_URL = '';

export const ChannelWithLoaders = () => {
  return (
    <Channel
      channelUrl={MY_CHANNEL_URL}
      renderPlaceholderLoader={() => <div>Loading...</div>}
      renderPlaceholderEmpty={() => <div>Empty</div>}
      renderPlaceholderInvalid={() => <div>Invalid channel</div>}
    />
  );
};

---

# 3. Customizing Input
# Use renderMessageInput prop to implement a custom input
import React from 'react';

import Channel from '@sendbird/uikit-react/Channel';
import sendBirdSelectors from "@sendbird/uikit-react/sendbirdSelectors";
import useSendbirdStateContext from "@sendbird/uikit-react/useSendbirdStateContext";
import { useChannelContext } from "@sendbird/uikit-react/Channel/context";

const MY_CHANNEL_URL = '';

export const ChannelWithMsgInput = () => {
  return (
    <Channel
      channelUrl={MY_CHANNEL_URL}
      renderMessageInput={() => <CustomizedMessageInput />}
    />
  );
};

const CustomizedMessageInput = () => {
  const inputRef = React.useRef();
  const store = useSendbirdStateContext();
  const sendUserMessage = sendBirdSelectors.getSendUserMessage(store);
  const sendUserMessage_ = (event) => {
    const params = {};
    params.message = inputRef?.current.value;
    sendUserMessage(channel, params)
      .onSucceeded((message) => {
        console.log(message);
        setInputText("");
      })
      .onFailed((error) => {
        console.log(error.message);
      });
  };
  return (
    <div>
      <input ref={inputRef} />
      <button onClick={sendUserMessage_} />
    <div>
  )
}

---

# 4. Customizing Queries
import React from 'react';

import Channel from '@sendbird/uikit-react/Channel';

const MY_CHANNEL_URL = '';

export const ChannelWithQueries = () => {
  const [queries] = React.useState({
    // use object json type input, don't create sendbird query instance
    // https://sendbird.github.io/core-sdk-javascript/module-model_params_messageListParams-MessageListParams.html
    // https://github.com/sendbird/SendBird-SDK-JavaScript/blob/master/SendBird.d.ts#L488
    messageListParams: {
      senderUserIds: ['user1'],
      prevResultSize: 30,
      includeReplies: false,
      includeReactions: false,
    },
  });
  return (
    <Channel
      channelUrl={MY_CHANNEL_URL}
      queries={queries}
    />
  );
};

# 5. Customizing Messages
import React from 'react';

import Channel from '@sendbird/uikit-react/Channel';

const MY_CHANNEL_URL = '';

export const ChannelWithLoaders = () => {
  return (
    <Channel
      channelUrl={MY_CHANNEL_URL}
      renderMessage={({ message }) => {
        {/* Only overrides user messages */}
        if (message?.messageType !== 'user') {
          return (
            <div>
              <div>{message.message}</div>
              <div>{message.createdAt}</div>
            </div>
          )
        }
        {/* Uses default rendering for all other messages */}
        return null;
      }}
    />
  );
};