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 , retail , digitale gezondheid of on-demand , het is noodzakelijk om een ​​gestroomlijnde chat-UI te hebben voor uw web- of mobiele app. De Sendbird UIKit maakt het eenvoudiger om een ​​intuïtieve chat-UI te implementeren. De Sendbird UIKit voor React biedt de middelen om een ​​functionele en aantrekkelijke chatervaring op te bouwen met vooraf gebouwde UI-componenten van de Sendbird SDK. De UIKit voor React is handig omdat het van cruciaal belang is voor ontwikkelaars om de elementen te kunnen selecteren die nodig zijn om functierijke, gestroomlijnde chat te bouwen zoals jij het voor ogen hebt.

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

Misschien vindt u de volgende videozelfstudie ook nuttig.

UIKit for React: de omgeving opzetten

Maak om te beginnen een applicatie op het Sendbird-dashboard . Hier heb je toegang tot alles wat nodig is voor je chatservice, inclusief je applicaties, gebruikers, berichten en kanalen. Nadat u een applicatie heeft gemaakt, heeft u de app-ID nodig om de Chat SDK te initialiseren.

Maak vervolgens een nieuwe projectomgeving aan met behulp van create-react-app. Voeg vervolgens een .env-bestand toe om de app-ID, gebruikers-ID en bijnaam op te slaan die zijn gegenereerd vanuit uw Sendbird-dashboard. Installeer nu Sendbird UIKit via npm of garen:

Zodra de UIKit voor React is geïnstalleerd, willen we deze 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 chatinterface creëren. App, of de app-component, geeft een weergave weer met een kanaallijst, kanaalconversatie en kanaalinstellingen, allemaal binnen één component.

Om dit te gebruiken, importeert u de UIKit-component SendbirdApp en de UIKit-stylesheet in het App.js-bestand:

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

Specificeer vervolgens de hoogte en breedte voor de chatinterface in de stylesheet:

Zorg ervoor dat u deze stylesheet importeert in het bestand App.js.

Op dit moment hebben we een succesvol lopende chat-applicatie waarin u een nieuw kanaal kunt maken en berichten kunt verzenden. Het zou er zo uit moeten zien:

Als u uw chatervaring wilt aanpassen, doet u dit door de kerncomponenten en modules van UIKit te gebruiken. Laten we eerst in de kerncomponenten 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 bewaart en werkt met alle gegevens die nodig zijn om een ​​toepassing uit te voeren.

Hoe werken de kerncomponenten? Ze krijgen gegevens van de Chat SDK-instantie, maken verbinding met de Sendbird-server, praten met de modules voor gebeurtenissen die plaatsvinden in de weergave en configureren functies en lokalisatie. Deze componenten werken om weergaven te maken en uit te voeren; ze bieden of tonen echter geen gebruikersinterface. Dat is waar de modules in het spel komen: de modules bieden een UI-weergave voor de kerncomponent die wordt gebruikt.

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

Met SendbirdProvider kunnen we de component useSendbirdStateContext() gebruiken om de Sendbird Chat SDK voor Javascript te implementeren in onderliggende componenten van SendbirdProvider. De component useSendbirdStateContext stelt ons in staat om toegang te krijgen tot de status van SendbirdProvider, in te haken op SDK-acties en kan worden gebruikt met sendbirdSelectors om functies te implementeren zoals het verzenden of bijwerken van een bericht.

Vóór UIKit v4 werd de component withSendbird() gebruikt om gegevens door te geven tussen de Chat SDK en de modules, maar met de UIKit-update raden we u aan om in plaats daarvan useSendbirdStateContext() te gebruiken.

Ten slotte worden de sendbirdSelectors gebruikt om gegevensbewerkingen uit te voeren en u toegang te geven tot de SDK. De belangrijkste selectorfuncties omvatten getSdk, getCreateOpenChannel en getDeleteMessage.

Behandelaars

UIKit biedt verschillende gebeurtenishandlers om activiteiten en gebeurtenissen die plaatsvinden in de client-app te beheren. Sinds de upgrade van v3 naar v4 in de Chat SDK heeft UIKit kanaalgebeurtenishandlers geïmplementeerd die kunnen worden geïmporteerd in plaats van de kanaalhandler aan te roepen vanuit de sdkInstance. De kanaalgebeurtenishandlers omvatten ConnectionHandler, GroupChannelHandler, OpenChannelHandler en UserEventHandler. Vervolgens gebruikt de SDK sessiehandlers om een ​​sessietoken te vernieuwen. Een sessietoken wordt gebruikt om een ​​gebruiker veilig te authenticeren wanneer de Chat SDK de gebruiker verbindt met de Sendbird-server waar ze gegevensverzoeken naar kunnen sturen voordat het token verloopt.

Modules in de UIKit voor React

Nu we de kerncomponenten van UIKit hebben leren kennen, is het belangrijk om meer te weten te komen over modules en hoe elke module werkt in combinatie met kerncomponenten. Modules werken als slimme componenten die een aanpasbare gebruikersinterface bieden. Deze modules bevatten providers en vooraf gebouwde UI-componenten die een functionele chatweergave creëren.

De acht modules in UIKit zijn:

1. Kanalen lijst
2. Maak een kanaal aan
3. Groepskanaal
4. Groepskanaalinstellingen
5. Kanaal openen
6. Kanaalinstellingen openen
7. Bericht zoeken
8. Gebruikersprofiel bewerken

Elke module heeft een contextprovider en een set UI-componenten. De provider beheert de benodigde gegevens van de Chat SDK terwijl de UI-componenten de interfaces weergeven om de weergave van de module weer te geven. Om gegevens tussen de provider en UI-componenten door te geven, gebruiken we een useContext-hook. De context hooks moeten zich binnen de provider bevinden om elke UI-component toegang te geven tot de gegevens van de provider. Hoewel er voor elke module een standaardset UI-componenten is, kunnen alle UI-componenten worden aangepast door de invoersteunen in te stellen met aangepaste componenten.

Kanalen lijst

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

Met de eigenschappen onBeforeCreateChannel en onChannelSelect kunt u acties uitvoeren terwijl de gebruiker interactie heeft met de gebruikersinterface van UIKit. Met de eigenschap renderChannelPreview kunt u de standaard gebruikersinterface van het kanaalvoorbeeld vervangen door uw eigen aangepaste component. Dit kan worden gebruikt om het kanaalvoorbeeld zo in te stellen dat de bijnaam van de gebruiker gewoon wordt weergegeven in de kanaallijst.

De contextprovider die voor deze module wordt gebruikt, is de ChannelListProvider . Deze provider beheert de logica en gegevens die worden gebruikt in de zenderlijstweergave. Dus als uw applicatie alleen een kanaallijst hoeft te bekijken, kunt u de ChannelList-module gebruiken om de weergave van een kanaallijst weer te geven en die module in de ChannelListProvider te laten plaatsen, die alle benodigde gegevens naar de ChannelList zal doorgeven.

U kunt ook de hook useChannelListContext gebruiken om toegang te krijgen tot de gegevens van de provider. Sommige eigenschappen van useChannelListContext zijn geïnitialiseerd, laden en currentChannel.

De UI-componenten waaruit de ChannelList-weergave bestaat, zijn ChannelListUI, ChannelListHeader en ChannelPreview. De ChannelListUI toont het basisscherm van de module, inclusief de headers en kanaalvoorbeeld. Het bevat een lijst met te gebruiken eigenschappen, zoals renderHeader, renderPlaceHolderError en renderPlaceHolderLoading. De ChannelListHeader is de header van ChannelListUI die de titel weergeeft en een knop om een ​​nieuw kanaal te maken. Drie eigenschappen die met deze gebruikersinterface kunnen worden gebruikt, zijn renderHeader, renderIconButton en allowProfileEdit. De ChannelPreview UI-component toont een enkele zender in de zenderlijst. De eigenschappen voor ChannelPreview zijn channel, onClick, renderChannelAction en isActive.

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

Dit is het standaardontwerp van de ChannelList-component:

CreateChannel

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

U kunt bijvoorbeeld onBeforeCreateChannel gebruiken om een ​​functie te activeren die moet worden aangeroepen wanneer de gebruiker klikt om een ​​groepskanaal te maken en voordat het een nieuw kanaal genereert. De aangeroepen functie kan bijvoorbeeld de afbeelding van de groep instellen voor het kanaal dat wordt gemaakt. Door de eigenschap onCreateChannel te gebruiken, kunt u een actie implementeren direct nadat het kanaal is gemaakt. Je kunt dit gebruiken om een ​​succesbericht op het scherm weer te geven zodra je kanaal is gemaakt. Als u een gebeurtenis wilt activeren wanneer op de knop 'Annuleren' wordt geklikt, kunt u de eigenschap onCancel gebruiken. Je kunt ervoor kiezen om vanaf hier je eigen aangepaste gebruikersinterface te implementeren en een functie aan te roepen om een ​​weergave weer te geven waarin je wordt gevraagd of je zeker weet dat je het maken van het kanaal wilt annuleren.

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

De UI-componenten waaruit de CreateChannel-weergave bestaat, zijn CreateChannelUI, InviteMembers en SelectChannelType. CreateChannelUI en SelectChannelType worden samen gebruikt om de eerste stap van de CreateChannel-module weer te geven. InviteMembers geeft de tweede stap weer nadat het kanaal is gemaakt. CreateChannelUI heeft eigenschappen onCancel en renderStepOne. SelectChannelType geeft de weergave weer waarin de huidige gebruiker kan kiezen welk type kanaal hij wil maken. InviteUsers geeft een weergave weer waarin de huidige gebruiker andere gebruikers kan uitnodigen om lid te worden van het kanaal. Zowel SelectChannelType als InviteMembers hebben een eigenschap onCancel.

De volgende code laat zien hoe u de module CreateChannel gebruikt met de CreateChannelProvider en useCreateChannel hook:

Hieronder ziet u de standaardlay-out van de CreateChannel-module:

Kanaal

De Channel -module geeft een groepskanaalgesprek weer. Gebruikers hebben alleen toegang tot een groepskanaal als ze zijn uitgenodigd om lid te worden van het kanaal. Voor deze module moet een eigenschap channelUrl worden ingesteld. Andere optionele eigenschappen zijn onder meer 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 aangepaste logica op de achtergrond uit te voeren wanneer de gebruiker klikt om een ​​bericht te verzenden, maar voltooi de bewerkingen voordat het bericht naar het kanaal wordt verzonden. Daarom activeert het bij het klikken op het verzenden van een bericht de functie die u doorgeeft om een ​​actie te voltooien en vervolgens het bericht te verzenden. Dit kan handig zijn in het geval dat u de tekst van het verzonden bericht wilt controleren en of het een specifiek woord bevat, en vervolgens een animatie activeert om af te gaan 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 te bouwen, zijn de ChannelProvider en de useChannelContext- hook. De ChannelProvider vereist een eigenschap channelUrl en bevat aanvullende eigenschappen zoals isMessageGroupingEnabled, isReactionEnabled en highlightMessage. De optionele eigenschappen van de contexthook useChannelContext omvatten channelUrl, startingPoint en onBeforeSendFileMessage.

De UI-componenten in de Channel-module zijn ChannelUI, ChannelHeader, MessageInput, MessageList, FileViewer, FrozenNotification, Message, RemoveMessageModal, TypingIndicator en UnreadCount. ChannelUI geeft het basisscherm van de module weer en heeft een aantal eigenschappen zoals renderPlaceholderLoader, renderMessageInput en renderTypingIndicator. ChannelHeader is de koptekst van de ChannelUI-component die de kanaaltitel, een pictogram voor het zoeken naar berichten en een pictogram voor kanaalinformatie weergeeft. MessageInput is het onderdeel waarin gebruikers een bericht kunnen invoeren of een bestandsbericht kunnen versturen.

MessageList geeft een lijst weer 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 onderdeel dat een banner weergeeft die gebruikers waarschuwt dat het huidige kanaal is bevroren. Message is een component binnen de MessageList die een enkel bericht in het kanaal laat zien. Het vereist een berichteigenschap en heeft aanvullende optionele eigenschappen zoals hasSeperator, chainTop en renderEditInput. VerwijderMessageModaltoont een modaal waarin wordt bevestigd dat het geselecteerde bericht van het kanaal zal worden verwijderd en heeft twee optionele eigenschappen: onCancel en bericht. TypingIndicator geeft weer welk lid in het kanaal actief een bericht aan het typen is. En tot slot geeft UnreadCount weer hoeveel ongelezen berichten er in een kanaal zijn. De eigenschappen van UnreadCount zijn count, time en onClick.

De volgende code is hoe de Channel-module te implementeren met behulp van de ChannelProvider en useChannelContext:

Dit is de standaardlay-out van de Channel-component:

Kanaalinstellingen

De module ChannelSettings geeft een menu weer met groepskanaalinformatie en instellingsopties. Leden kunnen een ledenlijst bekijken, een gebruiker uitnodigen voor het kanaal en het kanaal verlaten. Als de gebruiker een kanaaloperator is, heeft hij extra opties tot zijn beschikking (in de instellingen), zoals het kunnen toevoegen of verwijderen van operators, het dempen of uitsluiten van leden, het bekijken van een lijst met gedempte en uitgesloten gebruikers en het verlaten van het kanaal. of bevries het kanaal.

De ChannelSettings vereist een eigenschap channelUrl en heeft optionele eigenschappen zoals onCloseClick, onChannelModified en renderLeaveChannel. De eigenschappen onCloseClick en onChannelModified worden geactiveerd door een gebeurtenis die vanuit de gebruikersinterface zelf wordt geactiveerd 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 het een functie doorgeven waarbij u de gebruikersinterface wilt wijzigen om de instellingencomponent niet weer te geven. Als u een gebeurtenis wilt activeren nadat de instellingen zijn gewijzigd, kunt u een succesbericht op het scherm weergeven door de eigenschap onChannelModified te gebruiken. Wanneer u ChannelSettings gebruikt, wilt u misschien het ontwerp van de knop 'Kanaal verlaten' wijzigen. U kunt dit doen door de eigenschap renderLeaveChannel te gebruiken waarmee u uw eigen aangepaste gebruikersinterface kunt doorgeven aan de instellingenmodule.

De twee contextobjecten om een ​​kanaalinstellingenmenu voor deze module te bouwen, 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 hook useChannelSettingsContext heeft meerdere eigenschappen die kunnen worden gebruikt, zoals onCloseClick, onChannelModified en onBeforeUpdateChannel.

De ChannelSettings-set van UI-componenten die de weergave van de groepskanaalinstellingen vormen, zijn ChannelSettingsUI, ModerationPanel, UserPanel, ChannelProfile, EditDetailsModal, LeaveChannel en UserListItem. ChannelSettingsUI toont de weergave met de weergave van het kanaalprofiel, de weergave van het moderatiemenu en de knop Kanaal verlaten. De component heeft vier optionele eigenschappen: renderPlaceHolderError, renderChannelProfile, renderModerationPanel en renderLeaveChannel. Het ModerationPanel maakt de instellingenmenuweergave voor kanaaloperators. Dit omvat een lijst met operators, leden, gedempte en verbannen gebruikers, een schakelknop voor het bevriezen van kanalen en de optie om het kanaal te verlaten. Het gebruikerspaneelcomponent maakt de instellingenmenuweergave voor kanaalleden met een lijst met leden, een optie om andere gebruikers voor het kanaal uit te nodigen en een optie om het kanaal te verlaten. De ChannelProfile -component maakt de kanaalprofielweergave inclusief de kanaaltitel, afbeelding en bewerkingsknop waarmee gebruikers kanaalinformatie kunnen wijzigen. EditDetailsModal geeft een modaal weer waar gebruikers de kanaalnaam en profielafbeelding kunnen bewerken. Het heeft twee optionele eigenschappen die kunnen worden gebruikt: onSubmit en onCancel. De modale LeaveChannel wordt weergegeven wanneer een gebruiker klikt om het kanaal te verlaten in het instellingenmenu en vraagt ​​de gebruiker om deze actie te bevestigen. LeaveChannel heeft een eigenschap onSubmit en onCancel die ermee kan worden gebruikt. Het UserListItemgeeft een individuele gebruiker weer binnen een gebruikerslijst. Voor dit onderdeel moet een gebruikerseigenschap worden ingesteld en het heeft drie optionele eigenschappen: currentUser, className en action.

Hier ziet u hoe u de ChannelSettings-module implementeert met behulp van de ChannelSettingsProvider en useChannelSettingsContext:

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

Dit zijn de kanaalinstellingen die worden weergegeven voor kanaaloperators:

OpenKanaal

Een open kanaal is een openbaar kanaal dat een groot aantal gebruikers in een chat aankan. De OpenChannel- module vereist een eigenschap channelUrl en heeft een reeks optionele eigenschappen, zoals kinderen, isMessageGroupingEnabled, messageLimit en renderUserProfile.

De eigenschap children toont de onderliggende componenten van het OpenChannel, dit zijn gegevens die worden geleverd door de OpenChannelProvider. De eigenschap isMessageGroupingEnabled controleert of de functie is geactiveerd, zodat deze weet hoe de gebruikersinterface moet worden weergegeven. Als berichtgroepering is ingeschakeld, wordt elk bericht dat binnen één minuut wordt verzonden, gegroepeerd in één bericht. De eigenschap messageLimit geeft het maximale aantal berichten dat wordt 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 contextobjecten die kunnen worden gebruikt voor de OpenChannel-module om gegevens op te slaan en te verwerken, zijn de OpenChannelProvider en de hookOpenChannel. Voor de OpenChannelProvider moet een eigenschap channelUrl worden ingesteld. Enkele optionele eigenschappen zijn onder meer isMessageGroupingEnabled, messageLimit en onChatHeaderActionClick. De contexthook useOpenChannelContext heeft een aantal eigenschappen die kunnen worden gebruikt, zoals renderUserProfile, currentOpenChannel en allMessages.

De set UI-componenten waaruit de OpenChannel-module bestaat, zijn OpenChannelUI, OpenChannelHeader, OpenChannelInput, OpenChannelMessageList en OpenChannelMessage. OpenChannelUI toont het basisscherm van de module en de weergave van de koptekst, het bericht en de berichtenlijst in een open kanaal. OpenChannelUI heeft een lijst met optionele eigenschappen zoals renderMessage, renderHeader en renderInput. OpenChannelHeader geeft de kanaaltitel en het informatiepictogram weer. OpenChannelInput is waar gebruikers een bericht of bestandsbericht kunnen verzenden, zoals een afbeelding, video of document. De OpenChannelMessageList geeft een lijst weer van alle berichten in een open kanaal. Het heeft twee optionele eigenschappen: renderMessage en renderPlaceHolderEmptyList.OpenChannelMessage toont het individuele bericht in het kanaal. Deze component vereist een berichteigenschap en heeft een aantal optionele eigenschappen zoals hasSeperator, chainTop en editDisabled.

Hieronder ziet u hoe u de OpenChannel-module gebruikt met de OpenChannelProvider en OpenChannelContext gebruikt:

Zo ziet het standaardontwerp van OpenChannel eruit:

Open Kanaalinstellingen

De OpenChannelSettings- module toont een menu met instellingen, zoals het verstrekken van de kanaalnaam, afbeelding van het kanaal, de toepassings-URL en een lijst met deelnemers. Als de huidige gebruiker een operator is, heeft deze aanvullende instellingen zoals het toevoegen of verwijderen van bewerkingen, het bekijken van een lijst met gedempte en uitgesloten gebruikers, het kunnen dempen of verbannen van deelnemers en een optie om het kanaal te verwijderen.

Voor OpenChannelSettings moet een eigenschap channelUrl worden doorgegeven. Een paar andere eigenschappen zijn onChannelModified, onDeleteChannel en onCloseClick. Deze eigenschappen voeren een reeks bewerkingen uit terwijl de gebruiker met specifieke kenmerken in de gebruikersinterface communiceert. In de open kanaalinstellingen kunt u door onCloseClick te gebruiken de status van de instellingenbalk zo instellen dat deze wordt gesloten en de instellingencomponent uit de chatweergave verwijderen. Hetzelfde idee is van toepassing bij het gebruik van onChannelModified en onDeleteChannel, waar als de gebruiker klikt om gemaakte bewerkingen op te slaan of als ze op de knop klikken om het kanaal te verwijderen, u de gebruikersinterface in uw toepassing kunt wijzigen om een ​​aangepaste component te laten verschijnen op de scherm.

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

De UI-componenten die de algehele OpenChannelSetting-module vormen, zijn de OpenChannelSettingsUI, OperatorUI, ParticipantUI, OpenChannelProfile en EditDetailsModal. OpenChannelSettingsUI toont het basisscherm van de module die 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 met deelnemers in het open kanaal. OpenChannelProfile maakt een kanaalprofielweergave die de kanaaltitel en afbeelding weergeeft. EditDetailsModalverschijnt wanneer een gebruiker de kanaalnaam en profielafbeelding wil bewerken. Het heeft een eigenschap onCancel die kan worden geactiveerd wanneer op de knop Annuleren wordt geklikt.

De volgende code is hoe de OpenChannelSettings-module te gebruiken met de OpenChannelSettingsProvider en gebruikOpenChannelSettingsContext:

Dit is wat de OpenChannelSettings wordt weergegeven als:

BerichtZoeken

Met de MessageSearch -module kunnen gebruikers zoeken naar berichten binnen de kanalen waar ze lid van zijn. Er moet een eigenschap channelUrl worden ingesteld voor MessageSearch. Er zijn aanvullende optionele eigenschappen beschikbaar voor gebruik, zoals onResultLoaded, onResultClick en renderPlaceholderEmptyList.

Wanneer u de MessageSearch-module 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. U kunt dit doen met behulp van 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 gebruikersinterface maken voor de tijdelijke aanduiding wanneer de zoeklijst terugkomt zonder resultaten. Dus als de zoeklijst niets te vermelden heeft, kunt u een melding laten verschijnen.

Voor MessageSearch kunt u MessageSearchProvider gebruiken en de MessageSearch-hook gebruiken om gegevens op te slaan en te beheren die worden gebruikt om een ​​gebruikersinterface voor het zoeken naar berichten te bouwen. MessageSearchProvider vereist dat een channelUrl wordt opgegeven en heeft aanvullende optionele eigenschappen zoals onResultClick, messageSearchQuery en onResultLoaded. De hook useMessageSearchContext heeft een aantal optionele eigenschappen, zoals onResultLoaded, requestString en selectedMessageId.

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

Hier ziet u hoe u de MessageSearch implementeert met behulp van de MessageSearchProvider en gebruikMessageSearchContext:

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

Gebruikersprofiel bewerken

Met de module EditUserProfile kan de huidige gebruiker wijzigingen aanbrengen in zijn profiel. Door op hun eigen avatar te klikken, verschijnt er een pop-upvenster met hun profielinformatie. Hier hebben gebruikers de mogelijkheid om hun profielafbeelding en bijnaam te bewerken en kunnen ze het thema in de lichte of donkere modus schakelen.

EditUserProfile heeft 4 optionele eigenschappen , waaronder kinderen, onCancel, onThemeChange en onEditProfile. De eigenschap children wordt gebruikt om de onderliggende componenten op EditUserProfile te zien die EditUserProfileProvider ons verstrekt. onCancel wordt gebruikt om een ​​bewerking uit te voeren wanneer de gebruikersinterface wordt geactiveerd nadat de gebruiker heeft geklikt om eventuele bewerkingen te annuleren. Als je extra styling wilt toevoegen op basis van of de chat in de lichte of donkere modus staat, kun je onThemeChange gebruiken om een ​​functie aan te roepen die aangepaste CSS implementeert wanneer een gebruiker klikt om het thema te wijzigen. Ten slotte kunt u met onEditProfile een reeks acties implementeren zodra de gebruiker zijn profiel heeft bijgewerkt.

UIKit biedt EditUserProfileProvider en useEditUserProfileProviderContext hook als contextobjecten voor de EditUserProfile-module. Beide kunnen dezelfde optionele eigenschappen gebruiken als de 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:

Conclusie & volgende stappen

We hebben in detail de kerncomponenten en modules bekeken die de Sendbird UIKit voor React ons biedt. Met deze sterke basisset kunnen we nu beslissen welke componenten en modules nodig zijn om verschillende use cases te ondersteunen. Bekijk bijvoorbeeld onze blog over het bouwen van een WhatsApp-messenger-kloon met Sendbird UIKit voor React. In deze blog zul je begrijpen 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 documenten of verken de schat aan UIKit-tutorials op onze ontwikkelaarsportal . Als je hulp nodig hebt met de Sendbird UIKit , bekijk dan de communityforums of neem contact met ons op . Onze experts staan ​​altijd klaar om te helpen!

Veel plezier met chatten! ✨