Engineering

Een rondleiding door de Sendbird UIKit voor React: De essentiële componenten & modules die u moet kennen

Blog author
Michelle Wong Developer Advocate
Share
Een rondleiding door de Sendbird UIKit voor React: De essentiële componenten & modules die u moet kennen

Het bouwen van in-app
chat
is een fascinerende maar complexe onderneming. Of u nu bouwt voor
gaming
,
detailhandel
,
digitale gezondheid
of
on-demand
is het noodzakelijk om een
gestroomlijnde chat UI
voor uw web of mobiele app. The Sendbird UIKit maakt het gemakkelijker om een intuïtieve chat UI te implementeren. De Sendbird UIKit voor React biedt de middelen om een functionele en aantrekkelijke chat-ervaring te bouwen met voorgebouwde UI-componenten van de Sendbird SDK. De UIKit voor React is nuttig omdat het voor ontwikkelaars van cruciaal belang is om de elementen te kunnen selecteren die nodig zijn om een functierijke, gestroomlijnde chat te bouwen zoals jij die voor ogen hebt.

In deze blog leren we de componenten van de Sendbird UIKit voor React kennen, evenals elk van hun use cases. Aan het einde van deze blog zult u begrijpen hoe u deze componenten kunt implementeren om uw eigen aangepaste integratie te creëren.

UIKit voor React: De omgeving instellen

Om te beginnen maakt u een applicatie aan op het
Sendbird dashboard
. Hier hebt u toegang tot alles wat nodig is voor uw chatdienst, inclusief uw toepassingen, gebruikers, berichten en kanalen. Zodra u een toepassing maakt, hebt u de App ID nodig om de Chat SDK te initialiseren.

Maak vervolgens een nieuwe projectomgeving aan met create-react-app. Voeg vervolgens een .env bestand toe om de App ID, user ID en nickname op te slaan die is gegenereerd vanuit je Sendbird dashboard. Installeer nu Sendbird UIKit via npm of yarn:

Zodra de UIKit voor React is geïnstalleerd, willen we die in de applicatie implementeren door componenten te gebruiken. De eerste die we zullen leren is de App component.

App-component

De App-component is een verzameling UI-componenten die een functionele chat-interface creëren. App, of de App-component, geeft een weergave met een kanaallijst, kanaalgesprek en kanaalinstellingen, allemaal in één component.

Om dit te gebruiken, importeer je de UIKit component SendbirdApp en de UIKit stylesheet in het App.js bestand:

 

De App-component vereist dat een applicatie-ID en een gebruikers-ID worden doorgegeven. De volgende code toont hoe je de App component zou gebruiken:

Specificeer dan de hoogte en breedte voor de chat-interface in het stylesheet:

Zorg ervoor dat je dit stylesheet importeert in het App.js bestand.

Op dit punt hebben we een succesvol draaiende chatapplicatie waarin u een nieuw kanaal kunt aanmaken en berichten kunt versturen. Het zou er zo uit moeten zien:

Een succesvolle chattoepassing

Als u uw chat-ervaring wilt aanpassen, doet u dat met behulp van de kerncomponenten en modules die door UIKit worden geleverd. Laten we eerst in de kernonderdelen duiken.

Kerncomponenten in de UIKit voor React

De kerncomponenten zijn de belangrijkste bouwstenen van UIKit. De kerncomponenten zijn de SendbirdProvider, sendbirdSelectors, userSendbirdStateContext en withSenbird(). Elk van deze slaat alle gegevens op die nodig zijn om een toepassing te laten werken.

Hoe werken de kernonderdelen? Ze krijgen gegevens van de Chat SDK instance, maken verbinding met de Sendbird server, praten met de modules voor gebeurtenissen in de view, en configureren functies en lokalisatie. Deze componenten werken om weergaven te maken en uit te voeren; ze bieden of tonen echter geen UI. Dat is waar de modules om de hoek komen kijken: de modules bieden een UI-weergave voor de gebruikte kerncomponent.

De
SendbirdProvider
is de belangrijkste kerncomponent, omdat hij context biedt en de Chat SDK-gegevens en de huidige status doorgeeft aan alle kindcomponenten. De SendbirdProvider moet op het hoogste niveau staan zodat de hele applicatie toegang heeft tot Sendbird gegevens.

Met SendbirdProvider kunnen we de
useSendbirdStateContext()
component om de Sendbird Chat SDK voor Javascript te implementeren in kindcomponenten van SendbirdProvider. De component useSendbirdStateContext geeft ons toegang tot de status van SendbirdProvider, haakt in op SDK acties, en kan worden gebruikt met sendbirdSelectors om functionaliteiten te implementeren zoals het verzenden of updaten van een bericht.

Voor de UIKit v4 was de
metSendbird()
component gebruikt om gegevens door te geven tussen de Chat SDK en de modules, maar met de UIKit-update raden we aan om in plaats daarvan useSendbirdStateContext() te gebruiken.

Tenslotte zijn de
sendbirdSelectors
worden gebruikt om gegevensbewerkingen uit te voeren en geven u toegang tot de SDK. De
hoofdselectorfuncties
omvatten getSdk, getCreateOpenChannel en getDeleteMessage.

Behandelaars

UIKit biedt verschillende event handlers om activiteiten en gebeurtenissen in de client app te beheren. Sinds de upgrade van v3 naar v4 in de
Chat SDK
UIKit geïmplementeerd
kanaal event handlers
die kan worden geïmporteerd in plaats van de kanaalhandler aan te roepen vanuit de sdkInstance. De kanaal event handlers zijn ConnectionHandler, GroupChannelHandler, OpenChannelHandler en UserEventHandler. Vervolgens gebruikt de SDK sessie handlers om een sessietoken te vernieuwen. Een sessie token wordt gebruikt om een gebruiker veilig te authenticeren wanneer de Chat SDK de gebruiker verbindt met de Sendbird server waar ze data requests naar toe kunnen sturen voordat het token verloopt.

Modules in de UIKit voor React

Nu we hebben geleerd over de kerncomponenten van UIKit, is het belangrijk te leren over modules en hoe elke module samenwerkt met de kerncomponenten. Modules werken als slimme componenten die een aanpasbare UI bieden. Deze modules bevatten providers en voorgebouwde UI-componenten die een functionele chatweergave creëren.

De acht modules in UIKit zijn:

  1. Lijst van kanalen
  2. Een kanaal creëren
  3. Groepskanaal
  4. Instellingen voor groepskanalen
  5. Open kanaal
  6. Instellingen open kanaal
  7. Bericht zoeken
  8. Gebruikersprofiel bewerken

Elke module heeft een context provider en een set UI-componenten. De provider beheert de nodige gegevens van de Chat SDK, terwijl de UI-componenten de interfaces renderen om de weergave van de module weer te geven. Om gegevens door te geven tussen de provider en UI componenten, gebruiken we een useContext haak. De contexthaken moeten in de provider zitten, zodat elke UI-component toegang heeft tot de gegevens van de provider. Hoewel er voor elke module een standaardset UI-componenten is, kunnen alle UI-componenten worden aangepast door de invoerprops in te stellen met aangepaste componenten.

ChannelList

De
ChannelList
toont een lijst met groepskanalen waar de huidige gebruiker lid van is. Enkele eigenschappen van de ChannelList zijn onBeforeCreateChannel, onChannelSelect, en renderChannelPreview.

Met de eigenschappen onBeforeCreateChannel en onChannelSelect kunt u acties uitvoeren wanneer de gebruiker interageert met de gebruikersinterface van UIKit. Met de renderChannelPreview eigenschap kun je de standaard UI van de kanaalvoorvertoning vervangen door je eigen aangepaste component. Dit kan worden gebruikt om de kanaalvoorvertoning zo in te stellen dat alleen de nickname van de gebruiker in de kanaallijst wordt weergegeven.

De voor deze module gebruikte context-provider is de
ChannelListProvider
. Deze provider beheert de logica en gegevens die worden gebruikt in de kanaallijstweergave. Dus, als uw toepassing alleen een kanaallijst wil zien, kunt u de ChannelList-module gebruiken om een kanaallijst weer te geven en die module in de ChannelListProvider te wikkelen, die alle noodzakelijke gegevens doorgeeft aan de ChannelList.

Je zou ook de
useChannelListContext
haak om toegang te krijgen tot de gegevens van de provider. Enkele eigenschappen van useChannelListContext zijn initialized, loading, en currentChannel.

De UI componenten die de ChannelList view vormen zijn ChannelListUI, ChannelListHeader, en ChannelPreview. De ChannelListUI toont het basisscherm van de module, inclusief de koppen en de kanaalvoorstelling. Het bevat een lijst met te gebruiken eigenschappen zoals renderHeader, renderPlaceHolderError, en renderPlaceHolderLoading. De ChannelListHeader is de kop van ChannelListUI die de titel weergeeft en een knop om een nieuw kanaal te maken. Drie eigenschappen die u met deze UI kunt gebruiken zijn renderHeader, renderIconButton, en allowProfileEdit. De ChannelPreview UI-component toont een enkel kanaal in de kanaallijst. De eigenschappen voor ChannelPreview zijn channel, onClick, renderChannelAction, en isActive.

Hier is hoe u de ChannelList kunt implementeren met behulp van de ChannelListProvider en useChannelListContext:

Dit is het standaard ontwerp van de ChannelList component:

Standaard UI van de ChannelList component

CreateChannel

De
CreateChannel
module wordt gebruikt om een nieuw groepskanaal aan te maken. CreateChannel vereist dat de eigenschap channelUrl wordt doorgegeven. Extra optionele eigenschappen zijn onBeforeCreateChannel, onCreateChannel en onCancel. Alle drie deze eigenschappen voeren bepaalde acties uit binnen de gebruikersinterface van UIKit, zodat u uw eigen set bewerkingen kunt doorgeven en uitvoeren.

U kunt bijvoorbeeld onBeforeCreateChannel gebruiken om een functie te activeren die wordt aangeroepen als de gebruiker klikt om een groepskanaal te maken en voordat hij een nieuw kanaal genereert. De opgeroepen functie zou bijvoorbeeld het beeld van de groep kunnen instellen voor het kanaal dat wordt aangemaakt. Met de eigenschap onCreateChannel kun je een actie uitvoeren direct nadat het kanaal is aangemaakt. Je kunt dit gebruiken om een succesbericht op het scherm te laten verschijnen zodra je kanaal is aangemaakt. Als u een gebeurtenis wilt triggeren wanneer op de ‘cancel’-knop wordt geklikt, kunt u de eigenschap onCancel gebruiken. Je kunt ervoor kiezen om vanaf hier je eigen aangepaste UI te implementeren en een functie aan te roepen om een weergave te renderen met de vraag of je zeker weet dat je het maken van het kanaal wilt annuleren.

De twee contextobjecten die kunnen worden gebruikt om een groepskanaal aan te maken en gegevens van de provider door te geven aan de UI-componenten zijn de
CreateChannelProvider
en
useCreateChannel
haak. CreateChannelProvider vereist dat de eigenschap channelUrl wordt doorgegeven. Aanvullende optionele eigenschappen zijn children, onCreateChannel, onBeforeCreateChannel, en queries.applicationUserListQuery.

De UI componenten die de CreateChannel view samenstellen zijn CreateChannelUI, InviteMembers, en SelectChannelType. CreateChannelUI en SelectChannelType worden samen gebruikt om de eerste stap van de module CreateChannel weer te geven. Leden uitnodigen toont de tweede stap nadat het kanaal is aangemaakt.
CreateChannelUI
heeft de eigenschappen onCancel en renderStepOne.
SelectChannelType
rendert de weergave waarin de huidige gebruiker kan kiezen welk type kanaal hij wil aanmaken.
InviteUsers
toont een scherm waar de huidige gebruiker andere gebruikers kan uitnodigen om lid te worden van het kanaal. Zowel SelectChannelType als InviteMembers hebben een onCancel eigenschap.

De volgende code toont hoe de module CreateChannel te gebruiken met de haak CreateChannelProvider en useCreateChannel:

Hieronder staat de standaard lay-out van de module CreateChannel:

Een nieuw kanaal aanmaken

Gebruikers toevoegen aan een nieuw kanaal

Kanaal

De
Kanaal
module geeft een groepskanaalgesprek weer. Gebruikers hebben alleen toegang tot een groepskanaal als ze zijn uitgenodigd om lid te worden van het kanaal. Deze module vereist dat een channelUrl eigenschap wordt ingesteld. Andere optionele eigenschappen zijn isReactionEnabled, showSearchIcon, en onBeforeSendUserMessage.

De eigenschappen isReactionEnabled en showSearchIcon bepalen of de functie al dan niet wordt gebruikt en weergegeven. De eigenschap onBeforeSendUserMessage kan worden gebruikt om op de achtergrond aangepaste logica uit te voeren wanneer de gebruiker klikt om een bericht te verzenden, maar de bewerkingen te voltooien voordat het bericht naar het kanaal wordt verzonden. Daarom zal de functie die u opgeeft bij het aanklikken van een bericht een actie uitvoeren en vervolgens het bericht verzenden. Dit kan nuttig zijn in een geval waarin u wilt controleren of de tekst van het bericht wordt verzonden en indien deze een specifiek woord bevat, dan een animatie wilt laten afgaan wanneer het bericht wordt verzonden.

De twee contextobjecten die worden gebruikt om de gegevens op te slaan en te beheren die worden gebruikt om een groepskanaal op te bouwen, zijn de
ChannelProvider
en
useChannelContext
haak. De ChannelProvider vereist een channelUrl eigenschap en bevat aanvullende eigenschappen zoals isMessageGroupingEnabled, isReactionEnabled, en highlightedMessage. De useChannelContext context hook ’s optionele eigenschappen zijn channelUrl, startingPoint, en onBeforeSendFileMessage.

De UI-componenten in de module Channel zijn ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator en UnreadCount. ChannelUI toont het basisscherm van de module en heeft een aantal eigenschappen zoals renderPlaceholderLoader, renderMessageInput en renderTypingIndicator. ChannelHeader is de header van de ChannelUI-component die de kanaaltitel, een berichtzoekpictogram en een kanaalinformatiepictogram toont. MessageInput is het onderdeel waarin gebruikers een bericht kunnen invoeren of een bestandsbericht kunnen versturen.

Berichtenlijst toont een lijst van alle berichten in een groepskanaal en heeft drie eigenschappen: renderMessage, renderPlaceholderEmpty, en renderCustomSeperator. FileViewer toont alle berichten die beeld- of videobestanden bevatten en heeft twee optionele eigenschappen: onCancel en message. FrozenNotification is een component dat een banner toont die gebruikers waarschuwt dat het huidige kanaal bevroren is. Bericht is een component binnen de MessageList die een enkel bericht in het kanaal toont. Het vereist een bericht-eigenschap en heeft bijkomende optionele eigenschappen zoals hasSeperator, chainTop, en renderEditInput.
RemoveMessageModal
toont een modal waarin wordt bevestigd dat het geselecteerde bericht uit het kanaal zal worden verwijderd en heeft twee optionele eigenschappen: onCancel en message.
TypingIndicator
toont welk lid in het kanaal actief een bericht aan het typen is. En als laatste, UnreadCount toont hoeveel ongelezen berichten er in een chatroom zijn. De eigenschappen van UnreadCount zijn count, time, en onClick.

De volgende code laat zien hoe de Channel module wordt geïmplementeerd met behulp van de ChannelProvider en useChannelContext:

Dit is de standaard lay-out van de Kanaalcomponent:

De indeling van de kanaalcomponenten

ChannelSettings

De
ChannelSettings
module toont een menu met informatie over groepskanalen en instellingsopties. Leden kunnen een ledenlijst bekijken, een gebruiker uitnodigen voor de chatroom en de chatroom verlaten. Als de gebruiker een kanaaloperator is, dan heeft hij extra opties tot zijn beschikking (in de instellingen), zoals het toevoegen of verwijderen van operators, het dempen of verbannen van leden, een lijst van gemute en verbannen gebruikers, en het verlaten of bevriezen van het kanaal.

De ChannelSettings vereist een channelUrl eigenschap en heeft optionele eigenschappen zoals onCloseClick, onChannelModified, en renderLeaveChannel. De eigenschappen onCloseClick en onChannelModified worden geactiveerd door een gebeurtenis van de UI zelf en voeren de aangepaste logica uit die u doorgeeft. U kunt onCloseClick gebruiken in het geval dat een gebruiker op de knop klikt om de instellingenbalk te sluiten. U kunt een functie doorgeven waarbij u de UI wilt wijzigen om de instellingencomponent niet weer te geven. Als u een gebeurtenis wilt afvuren zodra de instellingen zijn gewijzigd, kunt u een succesbericht weergeven op het scherm door gebruik te maken van de eigenschap onChannelModified. Als u ChannelSettings gebruikt, wilt u misschien het ontwerp van de ‘verlaat het kanaal’-knop veranderen. U kunt dat doen door de eigenschap renderLeaveChannel te gebruiken, waarmee u uw eigen aangepaste UI kunt doorgeven aan de instellingenmodule.

De twee contextobjecten om een kanaalinstellingenmenu te bouwen voor deze module zijn de ChannelSettingsProvider en useChannelSettingsContext. De ChannelSettingsProvider vereist dat een channelUrl wordt doorgegeven. Enkele andere opties voor deze provider zijn onCloseClick, onBeforeUpdateChannel en invalidChannel. De
useChannelSettingsContext
hook heeft meerdere eigenschappen die gebruikt kunnen worden, zoals onCloseClick, onChannelModified en onBeforeUpdateChannel.

De ChannelSettings set van UI-componenten die de groep kanaalinstellingen vormen zijn ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel, en UserListItem. ChannelSettingsUI toont het beeld dat de kanaalprofielweergave, het moderatiemenu en de kanaalknop bevat. De component heeft vier optionele eigenschappen: renderPlaceHolderError, renderChannelProfile, renderModerationPanel en renderLeaveChannel. De ModerationPanel creëert het instellingenmenu voor kanaaloperators. Dit omvat een lijst van operators, leden, gemute en gebande gebruikers, een knop om het kanaal te bevriezen, en de optie om het kanaal te verlaten. De UserPanel component creëert het instellingenmenu voor chatroomleden met een lijst van leden, een optie om andere gebruikers uit te nodigen voor de chatroom, en een optie om de chatroom te verlaten. De
KanaalProfiel
component creëert de kanaalprofielweergave inclusief de kanaaltitel, afbeelding en wijzigknop waarmee gebruikers kanaalinformatie kunnen wijzigen.
EditDetailsModal
toont een modal waar gebruikers de kanaalnaam en de profielafbeelding kunnen bewerken. Het heeft twee optionele eigenschappen die kunnen worden gebruikt: onSubmit en onCancel. De LeaveChannel modaal verschijnt wanneer een gebruiker klikt om het kanaal te verlaten in het instellingenmenu en vraagt de gebruiker om deze actie te bevestigen. LeaveChannel heeft een onSubmit en onCancel eigenschap die ermee kunnen worden gebruikt. De UserListItem toont een individuele gebruiker binnen een gebruikerslijst. Deze component vereist dat een gebruikerseigenschap wordt ingesteld en heeft drie optionele eigenschappen: currentUser, className en action.

Hier staat hoe je de ChannelSettings module implementeert met behulp van de ChannelSettingsProvider en useChannelSettingsContext:

Dit is de standaard UI van de ChannelSetting voor niet-operators:

Standaard kanaalinstellingen UI

Dit zijn de kanaalinstellingen die worden weergegeven voor kanaaloperators:

Kanaalinstellingen UI voor kanaalbeheerders

OpenChannel

Een open kanaal is een openbaar kanaal dat een groot aantal gebruikers aankan die met elkaar in contact komen in een chat. De
Openkanaal
module vereist een channelUrl eigenschap en heeft een reeks optionele eigenschappen zoals children, isMessageGroupingEnabled, messageLimit, en renderUserProfile.

De children eigenschap toont de child componenten van de OpenChannel, dat zijn gegevens verstrekt door de OpenChannelProvider. De eigenschap isMessageGroupingEnabled controleert of de functie is geactiveerd, zodat het weet hoe de UI moet worden weergegeven. Als het groeperen van berichten is ingeschakeld, wordt elk bericht dat binnen een minuut wordt verzonden, gegroepeerd in één bericht. De messageLimit eigenschap geeft het maximum aantal berichten dat zal worden opgeslagen in de OpenChannelMessageList component van het kanaal. Als u het profielvoorbeeld wilt aanpassen wanneer u op de avatar van een gebruiker klikt, kunt u uw eigen UI-component doorgeven door de eigenschap renderUserProfile te gebruiken om het standaardontwerp te overschrijven.

De context objecten die gebruikt kunnen worden voor de OpenChannel module om gegevens op te slaan en af te handelen zijn de OpenChannelProvider en de useOpenChannel hook. De OpenChannelProvider vereist dat een channelUrl eigenschap wordt ingesteld. Enkele optionele eigenschappen zijn isMessageGroupingEnabled, messageLimit, en onChatHeaderActionClick. De
useOpenChannelContext
context hook heeft een aantal eigenschappen die kunnen worden gebruikt, zoals renderUserProfile, currentOpenChannel, en allMessages.

De reeks UI componenten die de OpenChannel module vormen zijn OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList en OpenChannelMessage. OpenChannelUI toont het basisscherm van de module en de weergave van de kop, het bericht en de berichtenlijst in een open kanaal. OpenChannelUI heeft een lijst van optionele eigenschappen zoals renderMessage, renderHeader en renderInput.
OpenkanaalHeader
geeft de kanaaltitel en het informatiepictogram weer.
OpenkanaalInput
is waar gebruikers een bericht of bestand zoals een afbeelding, video of document kunnen versturen. De OpenChannelMessageList toont een lijst van alle berichten in een open chatroom. Het heeft twee optionele eigenschappen: renderMessage en renderPlaceHolderEmptyList. OpenChannelMessage toont het individuele bericht in het kanaal. Deze component vereist een bericht eigenschap en heeft een aantal optionele eigenschappen zoals hasSeperator, chainTop, en editDisabled.

Hieronder staat hoe je de OpenChannel module kunt gebruiken met de OpenChannelProvider en useOpenChannelContext:

Zo ziet het standaardontwerp van OpenChannel eruit:

Standaard UI van het Openkanaal

OpenChannelSettings

De
OpenChannelSettings
module toont een menu met instellingen zoals het opgeven van de chatroomnaam, de afbeelding van de chatroom, de URL van de toepassing en een lijst met deelnemers. Als de huidige gebruiker een operator is, beschikt hij over extra instellingen zoals het toevoegen of verwijderen van bewerkingen, het bekijken van een lijst van gemute en gebande gebruikers, het kunnen dempen of verbannen van deelnemers, en een optie om het kanaal te verwijderen.

OpenChannelSettings vereist dat een channelUrl eigenschap wordt doorgegeven. Enkele andere eigenschappen zijn onChannelModified, onDeleteChannel en onCloseClick. Deze eigenschappen zullen een reeks handelingen uitvoeren wanneer de gebruiker met specifieke attributen in de UI interageert. In het open kanaal kunt u met onCloseClick de status van de instellingenbalk op gesloten zetten en de instellingencomponent uit de chatweergave verwijderen. Hetzelfde idee geldt voor het gebruik van onChannelModified en onDeleteChannel, waarbij als de gebruiker klikt om de gemaakte bewerkingen op te slaan of als hij op de knop klikt om het kanaal te verwijderen, u de UI in uw toepassing kunt aanpassen om een aangepaste component op het scherm te laten verschijnen.

De twee contextobjecten die worden gebruikt om een functioneel kanaalinstellingenmenu te bouwen zijn de OpenChannelSettingsProvider en de useOpenChannelSettingsContext haak. De OpenChannelSettingsProvider vereist dat een channelUrl wordt doorgegeven en bevat aanvullende eigenschappen zoals onBeforeUpdateChannel, disableUserProfile en renderUserProfile. De
useOpenChannelSettingsContext
hook heeft een lijst met eigenschappen zoals onDeleteChannel, onChanelModified, en setChannel.

De
UI componenten
die de algemene OpenChannelSetting module vormen zijn de OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile en EditDetailsModal.
OpenChannelSettingsUI
toont het basisscherm van de module dat de OperatorUI en ParticipantUI bevat. De twee optionele eigenschappen voor OpenChannelSettingsUI zijn renderOperatorUI en renderParticipantList.
OperatorUI
toont het instellingenmenu voor kanaaloperators en heeft een optionele eigenschap renderChannelProfile.
ParticipantUI
toont een lijst van deelnemers in de geopende chatroom.
OpenKanaalProfiel
creëert een kanaalprofielweergave die de kanaaltitel en -afbeelding weergeeft.
EditDetailsModal
verschijnt wanneer een gebruiker de kanaalnaam en de profielafbeelding wil bewerken. Het heeft een eigenschap onCancel die kan worden geactiveerd wanneer op de annuleerknop wordt geklikt.

De volgende code laat zien hoe je de OpenChannelSettings module kunt gebruiken met de OpenChannelSettingsProvider en useOpenChannelSettingsContext:

Zo wordt de OpenChannelSettings weergegeven:

De standaard UI van kanaalinstellingen

MessageSearch

De
MessageSearch
Met deze module kunnen gebruikers zoeken naar berichten binnen de kanalen waarvan zij lid zijn. Een channelUrl eigenschap moet worden ingesteld voor de MessageSearch. Extra facultatief
eigenschappen
zijn beschikbaar om te gebruiken, zoals onResultLoaded, onResultClick en renderPlaceholderEmptyList.

Als u de module MessageSearch gebruikt, wilt u misschien alle resultaten van een zoekopdracht weergeven in een apart UI-venster dat wordt weergegeven als een pop-uplaag bovenop de chat. Dat kan met de eigenschap onResultLoaded, waarbij een functie wordt aangeroepen zodra de resultaten zijn ontvangen. Met onResultClick kunt u aangepaste logica uitvoeren zodra een gebruiker een zoekresultaat selecteert. Met de eigenschap renderPlaceholderEmptyList kunt u een aangepaste UI maken voor de plaatshouder wanneer de zoeklijst geen resultaten oplevert. Dus, wanneer de zoeklijst niets te vermelden heeft, kunt u een melding laten verschijnen.

Voor MessageSearch kunt u MessageSearchProvider en useMessageSearch hook gebruiken om gegevens op te slaan en te beheren die worden gebruikt om een UI voor het zoeken van berichten te bouwen. MessageSearchProvider vereist dat een channelUrl wordt gespecificeerd en heeft bijkomende optionele eigenschappen zoals onResultClick, messageSearchQuery en onResultLoaded. De
useMessageSearchContext
hook heeft een aantal optionele eigenschappen zoals onResultLoaded, requestString, en selectedMessageId.

De
MessageSearchUI
is de enige UI-component in de module MessageSearch en geeft de weergave van de zoekresultaten weer.

Dit is hoe je de MessageSearch implementeert met de MessageSearchProvider en useMessageSearchContext:

De standaard UI van de MessageSearch module ziet er als volgt uit:

De standaard UI van MessageSearch

EditUserProfile

De
EditUserProfile
module kan de huidige gebruiker wijzigingen aanbrengen in zijn profiel. Door op hun eigen avatar te klikken, verschijnt een pop-up venster met hun profielinformatie. Hier kunnen gebruikers hun profielafbeelding en bijnaam bewerken, en het thema in de lichte of donkere modus zetten.

EditUserProfile heeft 4 optionele
eigenschappen
die kinderen, onCancel, onThemeChange en onEditProfile omvatten. De children eigenschap wordt gebruikt om de child componenten op EditUserProfile te zien die EditUserProfileProvider ons levert. onCancel wordt gebruikt om een bewerking uit te voeren wanneer de UI wordt getriggerd doordat de gebruiker klikt om gemaakte bewerkingen te annuleren. Als u extra styling wilt toevoegen op basis van of de chat in de lichte of donkere modus staat, kunt u onThemeChange gebruiken om een functie aan te roepen die aangepaste CSS implementeert wanneer een gebruiker klikt om het thema te veranderen. Tenslotte kun je met onEditProfile een reeks acties uitvoeren zodra de gebruiker zijn profiel heeft bijgewerkt.

UIKit biedt
EditUserProfileProvider
en
useEditUserProfileProviderContext
haak als contextobjecten voor de module EditUserProfile. Beide kunnen dezelfde optionele eigenschappen gebruiken als het EditUserProfile: children, onCancel, onThemeChange en onEditProfile.

De enige UI-component in de module EditUserProfile is
EditUserProfileUI
die de weergave van het gebruikersprofiel weergeeft.

Het standaardontwerp voor EditUserProfile ziet er als volgt uit:

De standaard UI van het bewerken van een gebruikersprofiel

Conclusie en volgende stappen

We hebben de kerncomponenten en modules die de Sendbird UIKit for React ons biedt in detail bekeken. Met deze sterke basis kunnen we nu beslissen welke componenten en modules nodig zijn om verschillende gebruikssituaties te ondersteunen. Bekijk als voorbeeld onze blog over hoe je een WhatsApp messenger kloon bouwt met Sendbird UIKit voor React. In deze blog begrijp je hoe je je eigen aangepaste WhatsApp-achtige chatervaring kunt bouwen met behulp van de kerncomponenten en modules die we in deze blogpost hebben besproken.

Bekijk voor meer informatie onze
docs
of verken de schat aan
UIKit tutorials
op onze
ontwikkelaarsporta
l. Als u hulp nodig heeft met de
Sendbird UIKit
bekijk de
gemeenschap forums
of
neem contact met ons op
. Onze experts staan altijd klaar om te helpen!

Happy chat building! ✨

 

Categories: Engineering