Uma visita ao Sendbird UIKit for React: Os componentes e módulos essenciais que precisa de conhecer

Criar bate- papo no aplicativo é um empreendimento fascinante, mas complexo. Esteja você criando para jogos , varejo , saúde digital ou sob demanda , é necessário ter uma interface de usuário de bate-papo simplificada para seu aplicativo da web ou móvel. O Sendbird UIKit facilita a implementação de uma interface de bate-papo intuitiva. O UIKit do Sendbird para React fornece os recursos para criar uma experiência de bate-papo funcional e atraente com componentes de interface do usuário pré-construídos do Sendbird SDK. O UIKit for React é útil porque é fundamental para os desenvolvedores selecionarem os elementos necessários para criar um bate-papo simplificado e rico em recursos da maneira que você o imagina.

Neste blog, aprenderemos sobre os componentes do Sendbird UIKit para React, bem como cada um de seus casos de uso. Ao final deste blog, você entenderá como implementar esses componentes para criar sua própria integração personalizada.

Você também pode achar útil o seguinte tutorial em vídeo.

UIKit para React: Configurando o ambiente

Para começar, crie um aplicativo no painel do Sendbird . É aqui que você pode acessar tudo o que é necessário para o seu serviço de chat, incluindo seus aplicativos, usuários, mensagens e canais. Depois de criar um aplicativo, você precisará do App ID para inicializar o Chat SDK.

Em seguida, crie um novo ambiente de projeto usando create-react-app. Em seguida, adicione um arquivo .env para armazenar o ID do aplicativo, o ID do usuário e o apelido que foram gerados no painel do Sendbird. Agora, instale o Sendbird UIKit através do npm ou yarn:

Depois que o UIKit for React estiver instalado, queremos implementá-lo no aplicativo usando componentes. O primeiro sobre o qual aprenderemos é o componente App.

Componente do aplicativo

O componente App é uma coleção de componentes de UI que criam uma interface de chat funcional. O aplicativo, ou o componente do aplicativo, renderizará uma exibição contendo uma lista de canais, conversas de canal e configurações de canal, tudo em um componente.

Para usar isso, importe o componente UIKit SendbirdApp e a folha de estilo UIKit no arquivo App.js:

O componente App requer que um ID de aplicativo e um ID de usuário sejam passados. O código a seguir descreve como você usaria o componente App:

Em seguida, especifique a altura e a largura da interface de bate-papo na folha de estilo:

Certifique-se de importar esta folha de estilo no arquivo App.js.

Neste ponto, temos um aplicativo de bate-papo em execução com sucesso no qual você pode criar um novo canal e enviar mensagens. Deve ficar assim:

Se você quiser personalizar sua experiência de bate-papo, faça isso usando os principais componentes e módulos fornecidos pelo UIKit. Primeiro, vamos nos aprofundar nos componentes principais.

Componentes principais no UIKit para React

Os componentes principais são os principais blocos de construção do UIKit. Os principais componentes incluem SendbirdProvider, sendbirdSelectors, userSendbirdStateContext e withSenbird(). Cada um deles armazena e opera todos os dados necessários para executar um aplicativo.

Como funcionam os componentes principais? Eles obtêm dados da instância do Chat SDK, conectam-se ao servidor Sendbird, conversam com os módulos sobre eventos que ocorrem na exibição e configuram recursos e localização. Esses componentes trabalham para criar e executar exibições; no entanto, eles não fornecem ou exibem uma interface do usuário. É aí que os módulos entram em jogo: os módulos fornecem uma visualização de interface do usuário para o componente principal que está sendo usado.

O SendbirdProvider é o componente principal mais importante porque fornece contexto e transmite os dados do Chat SDK, bem como o estado atual para qualquer componente filho. O SendbirdProvider precisa estar no nível superior para que todo o aplicativo tenha acesso aos dados do Sendbird.

Com SendbirdProvider, podemos usar o componente useSendbirdStateContext() para implementar o Sendbird Chat SDK para Javascript em componentes filhos de SendbirdProvider. O componente useSendbirdStateContext nos permitirá acessar o estado de SendbirdProvider, conectar-se a ações do SDK e pode ser usado com sendbirdSelectors para implementar funcionalidades como enviar ou atualizar uma mensagem.

Antes do UIKit v4, o componente withSendbird() era usado para passar dados entre o Chat SDK e os módulos, mas com a atualização do UIKit, recomendamos que você use useSendbirdStateContext().

Por fim, os sendbirdSelectors são usados ​​para executar operações de dados e fornecer acesso ao SDK. As principais funções do seletor incluem getSdk, getCreateOpenChannel e getDeleteMessage.

Manipuladores

O UIKit fornece vários manipuladores de eventos para gerenciar atividades e eventos que ocorrem no aplicativo cliente. Desde a atualização de v3 para v4 no Chat SDK , o UIKit implementou manipuladores de eventos de canal que podem ser importados em vez de chamar o manipulador de canal do sdkInstance. Os manipuladores de eventos de canal incluem ConnectionHandler, GroupChannelHandler, OpenChannelHandler e UserEventHandler. Em seguida, o SDK usa manipuladores de sessão para renovar um token de sessão. Um token de sessão é usado para autenticar com segurança um usuário quando o Chat SDK conecta o usuário ao servidor Sendbird, onde ele pode enviar solicitações de dados antes que o token expire.

Módulos no UIKit para React

Agora que aprendemos sobre os principais componentes do UIKit, é importante aprender sobre os módulos e como cada módulo funciona em conjunto com os componentes principais. Os módulos operam como componentes inteligentes que fornecem uma interface de usuário personalizável. Esses módulos contêm provedores e componentes de interface do usuário pré-construídos que criam uma exibição de bate-papo funcional.

Os oito módulos do UIKit são:

1. Lista de canais
2. Criar um canal
3. canal de grupo
4. Configurações de canal de grupo
5. canal aberto
6. Abrir configurações do canal
7. Pesquisa de mensagens
8. Editar perfil de usuário

Cada módulo possui um provedor de contexto e um conjunto de componentes de interface do usuário. O provedor gerencia os dados necessários do Chat SDK enquanto os componentes da interface do usuário renderizam as interfaces para exibir a exibição do módulo. Para passar dados entre o provedor e os componentes da interface do usuário, utilizamos um hook useContext. Os ganchos de contexto devem estar dentro do provedor para permitir que todos os componentes da interface do usuário tenham acesso aos dados do provedor. Embora haja um conjunto padrão de componentes de interface do usuário para cada módulo, todos os componentes de interface do usuário são personalizáveis, definindo as props de entrada com componentes personalizados.

Lista de canais

A ChannelList mostra uma lista de canais de grupo dos quais o usuário atual é membro. Algumas das propriedades de ChannelList incluem onBeforeCreateChannel, onChannelSelect e renderChannelPreview.

As propriedades onBeforeCreateChannel e onChannelSelect permitem que você execute ações enquanto o usuário interage com a interface do usuário do UIKit. A propriedade renderChannelPreview permite que você substitua a interface do usuário padrão da visualização do canal por seu próprio componente personalizado. Isso pode ser usado para definir a visualização do canal para simplesmente exibir o apelido do usuário na lista de canais.

O provedor de contexto usado para este módulo é o ChannelListProvider . Este provedor gerencia a lógica e os dados usados ​​na visualização da lista de canais. Portanto, se seu aplicativo requer apenas a exibição de uma lista de canais, você pode usar o módulo ChannelList para exibir a exibição de uma lista de canais e ter esse módulo agrupado dentro do ChannelListProvider, que passará todos os dados necessários para o ChannelList.

Você também pode usar o gancho useChannelListContext para obter acesso aos dados do provedor. Algumas das propriedades de useChannelListContext são inicializadas, carregando e currentChannel.

Os componentes de interface do usuário que compõem a exibição ChannelList são ChannelListUI, ChannelListHeader e ChannelPreview. A ChannelListUI mostra a tela básica do módulo, incluindo os cabeçalhos e visualização do canal. Ele inclui uma lista de propriedades a serem usadas, como renderHeader, renderPlaceHolderError e renderPlaceHolderLoading. O ChannelListHeader é o cabeçalho do ChannelListUI que exibe o título e um botão para criar um novo canal. Três propriedades a serem utilizadas com essa interface do usuário são renderHeader, renderIconButton e allowProfileEdit. O componente ChannelPreview UI mostra um único canal na lista de canais. As propriedades para ChannelPreview são channel, onClick, renderChannelAction e isActive.

Aqui está como você pode implementar o ChannelList usando o ChannelListProvider e useChannelListContext:

Este é o design padrão do componente ChannelList:

CriarCanal

O módulo CreateChannel é usado para criar um novo canal de grupo. CreateChannel requer que a propriedade channelUrl seja passada para ele. Propriedades opcionais adicionais incluem onBeforeCreateChannel, onCreateChannel e onCancel. Todas essas três propriedades são executadas em determinadas ações na interface do usuário do UIKit, permitindo que você passe e execute seu próprio conjunto de operações.

Por exemplo, você pode usar onBeforeCreateChannel para acionar uma função a ser chamada conforme o usuário clica para criar um canal de grupo e antes de gerar um novo canal. A função chamada, por exemplo, poderia definir a imagem do grupo para o canal que está sendo criado. O uso da propriedade onCreateChannel permitirá que você implemente uma ação logo após a criação do canal. Você pode usar isso para renderizar uma mensagem de sucesso na tela assim que seu canal for criado. Se você quiser acionar um evento quando o botão 'cancelar' for clicado, você pode usar a propriedade onCancel. Você pode optar por implementar sua própria IU personalizada a partir daqui e chamar uma função para renderizar uma exibição perguntando se tem certeza de que deseja cancelar a criação do canal.

Os dois objetos de contexto que podem ser usados ​​para criar um canal de grupo e passar dados do provedor para os componentes de UI são o gancho CreateChannelProvider e useCreateChannel . CreateChannelProvider requer que a propriedade channelUrl seja transmitida. Propriedades opcionais adicionais são filhos, onCreateChannel, onBeforeCreateChannel e queries.applicationUserListQuery.

Os componentes de interface do usuário que compõem a exibição CreateChannel são CreateChannelUI, InviteMembers e SelectChannelType. CreateChannelUI e SelectChannelType são usados ​​juntos para mostrar a primeira etapa do módulo CreateChannel. InviteMembers exibe a segunda etapa após a criação do canal. CreateChannelUI tem as propriedades onCancel e renderStepOne. SelectChannelType renderiza a exibição onde o usuário atual pode escolher qual tipo de canal criar. InviteUsers exibe uma exibição em que o usuário atual pode convidar outros usuários para ingressar no canal. Ambos SelectChannelType e InviteMembers têm uma propriedade onCancel.

O código a seguir mostra como usar o módulo CreateChannel com o gancho CreateChannelProvider e useCreateChannel:

Abaixo está o layout padrão do módulo CreateChannel:

Canal

O módulo Canal exibe uma conversa de canal de grupo. Os usuários podem acessar um canal de grupo apenas se forem convidados a serem membros do canal. Este módulo requer que uma propriedade channelUrl seja definida. Outras propriedades opcionais incluem isReactionEnabled, showSearchIcon e onBeforeSendUserMessage.

As propriedades isReactionEnabled e showSearchIcon controlam se o recurso está sendo usado e exibido ou não. A propriedade onBeforeSendUserMessage pode ser usada para executar a lógica personalizada em segundo plano quando o usuário clicar para enviar uma mensagem, mas concluir as operações antes que a mensagem seja enviada ao canal. Portanto, ao clicar em enviar uma mensagem, ele acionará a função que você passar para concluir uma ação e, em seguida, enviará a mensagem. Isso pode ser útil no caso em que você deseja verificar o texto da mensagem que está sendo enviada e, se ela contiver uma palavra específica, acionar uma animação para disparar quando a mensagem for enviada.

Os dois objetos de contexto usados ​​para armazenar e gerenciar os dados usados ​​para construir um canal de grupo são o gancho ChannelProvider e useChannelContext . O ChannelProvider requer uma propriedade channelUrl e inclui propriedades adicionais, como isMessageGroupingEnabled, isReactionEnabled e HighlightMessage. As propriedades opcionais do gancho de contexto useChannelContext incluem channelUrl, StartingPoint e onBeforeSendFileMessage.

Os componentes de interface do usuário no módulo Channel são ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator e UnreadCount. ChannelUI exibe a tela básica do módulo e possui várias propriedades, como renderPlaceholderLoader, renderMessageInput e renderTypingIndicator. ChannelHeader é o cabeçalho do componente ChannelUI que mostra o título do canal, um ícone de pesquisa de mensagem e um ícone de informações do canal. MessageInput é o componente no qual os usuários podem inserir uma mensagem ou enviar uma mensagem de arquivo.

MessageList exibe uma lista de todas as mensagens em um canal de grupo e possui três propriedades: renderMessage, renderPlaceholderEmpty e renderCustomSeperator. FileViewer mostra todas as mensagens contendo arquivos de imagem ou vídeo e tem duas propriedades opcionais: onCancel e message. FrozenNotification é um componente que exibe um banner alertando os usuários de que o canal atual está congelado. Message é um componente dentro de MessageList que mostra uma única mensagem no canal. Ele requer uma propriedade de mensagem e possui propriedades opcionais adicionais, como hasSeperator, chainTop e renderEditInput. RemoveMessageModalmostra um modal confirmando que a mensagem selecionada será excluída do canal e possui duas propriedades opcionais: onCancel e message. TypingIndicator exibe qual membro do canal está digitando ativamente uma mensagem. E, por último, UnreadCount exibe quantas mensagens não lidas existem em um canal. As propriedades de UnreadCount são count, time e onClick.

O código a seguir mostra como implementar o módulo Channel usando ChannelProvider e useChannelContext:

Este é o layout padrão do componente Canal:

Configurações do canal

O módulo ChannelSettings exibe um menu de informações de canal de grupo e opções de configurações. Os membros podem verificar uma lista de membros, convidar um usuário para o canal e sair do canal. Se o usuário for um operador de canal, ele terá opções adicionais disponíveis (nas configurações), como adicionar ou remover operadores, silenciar ou banir membros, ver uma lista de usuários silenciados e banidos e deixar ou congelar o canal.

O ChannelSettings requer uma propriedade channelUrl e tem propriedades opcionais como onCloseClick, onChannelModified e renderLeaveChannel. As propriedades onCloseClick e onChannelModified são acionadas por um evento disparado da própria interface do usuário e executam a lógica personalizada que você passa. Você pode utilizar onCloseClick no evento em que um usuário clica no botão para fechar a barra de configurações. Você pode passar uma função onde deseja modificar a interface do usuário para não exibir o componente de configurações. Se quiser disparar um evento assim que as configurações forem alteradas, você pode renderizar uma mensagem de sucesso na tela utilizando a propriedade onChannelModified. Ao usar o ChannelSettings, você pode querer alterar o design do botão 'sair do canal'. Você pode fazer isso usando a propriedade renderLeaveChannel com a qual você pode passar sua própria interface do usuário personalizada para o módulo de configurações.

Os dois objetos de contexto para criar um menu de configurações de canal para este módulo são ChannelSettingsProvider e useChannelSettingsContext. O ChannelSettingsProvider requer que um channelUrl seja passado. Algumas outras opções para este provedor são onCloseClick, onBeforeUpdateChannel e invalidChannel. O gancho useChannelSettingsContext tem várias propriedades que podem ser usadas, como onCloseClick, onChannelModified e onBeforeUpdateChannel.

O conjunto ChannelSettings de componentes de interface do usuário que compõem a exibição de configurações do canal de grupo são ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel e UserListItem. ChannelSettingsUI exibe a visualização que inclui a visualização do perfil do canal, a visualização do menu de moderação e o botão Sair do canal. O componente tem quatro propriedades opcionais: renderPlaceHolderError, renderChannelProfile, renderModerationPanel e renderLeaveChannel. O ModerationPanel cria a exibição do menu de configurações para operadores de canal. Isso inclui uma lista de operadores, membros, usuários silenciados e banidos, um botão de alternância de canal congelado e a opção de sair do canal. O painel do usuárioO componente cria a exibição do menu de configurações para os membros do canal, que inclui uma lista de membros, opção para convidar outros usuários para o canal e uma opção para sair do canal. O componente ChannelProfile cria a exibição do perfil do canal, incluindo o título do canal, a imagem e o botão de edição, permitindo que os usuários alterem as informações do canal. EditDetailsModal exibe um modal onde os usuários podem editar o nome do canal e a imagem do perfil. Possui duas propriedades opcionais que podem ser utilizadas: onSubmit e onCancel. O modal LeaveChannel renderiza quando um usuário clica para sair do canal no menu de configurações e solicita que o usuário confirme essa ação. LeaveChannel tem uma propriedade onSubmit e onCancel que pode ser usada com ele. O UserListItemexibe um usuário individual em uma lista de usuários. Esse componente requer que uma propriedade do usuário seja definida e possui três propriedades opcionais: currentUser, className e action.

Aqui está como você implementa o módulo ChannelSettings usando o ChannelSettingsProvider e useChannelSettingsContext:

Esta é a IU padrão do ChannelSetting para não operadores:

Estas são as configurações de canal que serão exibidas para os operadores de canal:

OpenChannel

Um canal aberto é um canal público que pode lidar com um grande número de usuários interagindo em um chat. O módulo OpenChannel requer uma propriedade channelUrl e possui uma variedade de propriedades opcionais, como filhos, isMessageGroupingEnabled, messageLimit e renderUserProfile.

A propriedade children mostra os componentes filhos do OpenChannel, que são dados fornecidos pelo OpenChannelProvider. A propriedade isMessageGroupingEnabled verifica se o recurso está ativado para saber como exibir a interface do usuário. Se o agrupamento de mensagens estiver ativado, cada mensagem enviada em um minuto será agrupada em uma mensagem. A propriedade messageLimit fornece o número máximo de mensagens que serão armazenadas no componente OpenChannelMessageList do canal. Se quiser personalizar a visualização do perfil ao clicar no avatar de um usuário, você pode passar seu próprio componente de interface do usuário usando a propriedade renderUserProfile para substituir o design padrão.

Os objetos de contexto que podem ser usados ​​para o módulo OpenChannel para armazenar e manipular dados são o OpenChannelProvider e o hook useOpenChannel. O OpenChannelProvider requer que uma propriedade channelUrl seja definida. Algumas propriedades opcionais incluem isMessageGroupingEnabled, messageLimit e onChatHeaderActionClick. O gancho de contexto useOpenChannelContext tem várias propriedades que podem ser utilizadas, como renderUserProfile, currentOpenChannel e allMessages.

O conjunto de componentes de interface do usuário que compõem o módulo OpenChannel são OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList e OpenChannelMessage. OpenChannelUI exibe a tela básica do módulo e a exibição do cabeçalho, mensagem e lista de mensagens em um canal aberto. OpenChannelUI tem uma lista de propriedades opcionais, como renderMessage, renderHeader e renderInput. OpenChannelHeader renderiza o título do canal e o ícone de informações. OpenChannelInput é onde os usuários podem enviar uma mensagem ou mensagem de arquivo como uma imagem, vídeo ou documento. O OpenChannelMessageList exibe uma lista de todas as mensagens em um canal aberto. Ele tem duas propriedades opcionais: renderMessage e renderPlaceHolderEmptyList.OpenChannelMessage mostra a mensagem individual no canal. Esse componente requer uma propriedade de mensagem e possui várias propriedades opcionais, como hasSeperator, chainTop e editDisabled.

Abaixo está como usar o módulo OpenChannel com o OpenChannelProvider e useOpenChannelContext:

É assim que o design padrão do OpenChannel se parece:

Configurações do OpenChannel

O módulo OpenChannelSettings mostra um menu de configurações, como fornecer o nome do canal, a imagem do canal, a URL do aplicativo e uma lista de participantes. Se o usuário atual for um operador, ele terá configurações adicionais, como adicionar ou remover operações, visualizar uma lista de usuários silenciados e banidos, poder silenciar ou banir participantes e uma opção para excluir o canal.

OpenChannelSettings requer que uma propriedade channelUrl seja transmitida. Algumas outras propriedades fornecidas são onChannelModified, onDeleteChannel e onCloseClick. Essas propriedades executarão um conjunto de operações conforme o usuário interage com atributos específicos na interface do usuário. Nas configurações do canal aberto, usando onCloseClick, você pode definir o estado da barra de configurações como fechada e remover o componente de configurações da visualização do chat. A mesma ideia se aplica ao usar onChannelModified e onDeleteChannel, onde se o usuário clicar para salvar as edições que fez ou se clicar no botão para excluir o canal, você pode modificar a IU em seu aplicativo para ter um componente personalizado para aparecer no tela.

Os dois objetos de contexto usados ​​para construir um menu de configurações de canal funcional são o gancho OpenChannelSettingsProvider e useOpenChannelSettingsContext. O OpenChannelSettingsProvider requer que um channelUrl seja passado e inclua propriedades adicionais, como onBeforeUpdateChannel, disableUserProfile e renderUserProfile. O hook useOpenChannelSettingsContext tem uma lista de propriedades como onDeleteChannel, onChanelModified e setChannel.

Os componentes de interface do usuário que compõem o módulo OpenChannelSetting geral são OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile e EditDetailsModal. OpenChannelSettingsUI exibe a tela básica do módulo que contém a OperatorUI e a ParticipantUI. As duas propriedades opcionais para OpenChannelSettingsUI são renderOperatorUI e renderParticipantList. OperatorUI mostra o menu de configurações para operadores de canal e possui uma propriedade opcional renderChannelProfile. ParticipantUI exibe uma lista de participantes no canal aberto. OpenChannelProfile cria uma exibição de perfil de canal que exibe o título e a imagem do canal. EditDetailsModalaparece quando um usuário deseja editar o nome do canal e a imagem do perfil. Ele possui uma propriedade onCancel que pode ser acionada quando o botão Cancelar é clicado.

O código a seguir é como utilizar o módulo OpenChannelSettings com o OpenChannelSettingsProvider e useOpenChannelSettingsContext:

Isto é o que o OpenChannelSettings é exibido como:

Busca de mensagem

O módulo MessageSearch permite que os usuários pesquisem mensagens nos canais dos quais são membros. Uma propriedade channelUrl deve ser definida para o MessageSearch. Propriedades opcionais adicionais estão disponíveis para uso, como onResultLoaded, onResultClick e renderPlaceholderEmptyList.

Ao usar o módulo MessageSearch, você pode querer mostrar todos os resultados de uma pesquisa em uma janela separada da interface do usuário que é exibida como uma camada pop-up na parte superior do chat. Você pode fazer isso usando a propriedade onResultLoaded onde uma função é chamada assim que os resultados são recebidos. Usando onResultClick, você pode executar a lógica personalizada assim que um usuário selecionar um resultado de pesquisa. A propriedade renderPlaceholderEmptyList permite criar uma interface do usuário personalizada para o espaço reservado quando a lista de pesquisa retorna sem resultados. Portanto, quando a lista de pesquisa não tiver nada para listar, você poderá exibir uma notificação.

Para MessageSearch, você pode usar MessageSearchProvider e use o hookMessageSearch para armazenar e gerenciar dados usados ​​para construir uma interface do usuário de pesquisa de mensagem. MessageSearchProvider requer que um channelUrl seja especificado e tem propriedades opcionais adicionais, como onResultClick, messageSearchQuery e onResultLoaded. O gancho useMessageSearchContext tem várias propriedades opcionais, como onResultLoaded, requestString e selectedMessageId.

O MessageSearchUI é o único componente de interface do usuário no módulo MessageSearch e exibe a exibição dos resultados da pesquisa.

Aqui está como você implementa o MessageSearch usando o MessageSearchProvider e useMessageSearchContext:

A IU padrão do módulo MessageSearch tem esta aparência:

Editar perfil do usuário

O módulo EditUserProfile permite que o usuário atual faça alterações em seu perfil. Ao clicar em seu próprio avatar, uma janela pop-up com suas informações de perfil aparece. Aqui, os usuários têm a opção de editar sua imagem de perfil, apelido e podem alternar o tema para o modo claro ou escuro.

EditUserProfile tem 4 propriedades opcionais que incluem filhos, onCancel, onThemeChange e onEditProfile. A propriedade children é usada para ver os componentes filhos em EditUserProfile que EditUserProfileProvider nos fornece. onCancel é usado para executar uma operação quando a interface do usuário é acionada pelo clique do usuário para cancelar quaisquer edições feitas. Se você quiser adicionar um estilo adicional com base no modo claro ou escuro do bate-papo, use onThemeChange para chamar uma função que implemente CSS personalizado quando um usuário clicar para alterar o tema. Por fim, onEditProfile permite implementar um conjunto de ações uma vez que o usuário tenha atualizado seu perfil.

O UIKit fornece o gancho EditUserProfileProvider e useEditUserProfileProviderContext como objetos de contexto para o módulo EditUserProfile. Ambos podem usar as mesmas propriedades opcionais do EditUserProfile: children, onCancel, onThemeChange e onEditProfile.

O único componente de interface do usuário no módulo EditUserProfile é EditUserProfileUI , que renderiza a visualização do perfil do usuário.

O design padrão para EditUserProfile ficará assim:

Conclusão e próximos passos

Analisamos em detalhes os principais componentes e módulos que o Sendbird UIKit for React fornece para nós. Com esse sólido conjunto de fundamentos, agora poderemos decidir quais componentes e módulos são necessários para dar suporte a diferentes casos de uso. Como exemplo, confira nosso blog sobre como criar um clone do WhatsApp messenger com o Sendbird UIKit para React. Neste blog, você entenderá como criar sua própria experiência de bate-papo personalizada semelhante ao WhatsApp usando os principais componentes e módulos que discutimos ao longo desta postagem do blog.

Para obter mais informações, confira nossos documentos ou explore a variedade de tutoriais do UIKit em nosso portal do desenvolvedor l. Se precisar de ajuda com o Sendbird UIKit , confira os fóruns da comunidade ou entre em contato conosco . Nossos especialistas estão sempre prontos para ajudar!

Boa construção de bate-papo! ✨