Delivered UI- Overview

Please note that all child components must be placed within the Delivered.Root component in order to function correctly.

The Delivered ReactJS SDK comes with a default UI that can be used by passing the UI component to the render prop in the following manner:

<Delivered.ComponentName render={props => <Delivered.ComponentNameUI {...props} />} />

You can pick and choose which components you want to use and where. However, if you would like to use the whole SDK with all its functionalities and the default UI, you can simply copy paste this into your application (and replace the Root props with real values):

<Delivered.Root token={yourToken} provider={yourProvider} config={deliveredConfig} lang={defaultLang}>
    <div className='chat-container'>
        <div className='chat-list'>
            <Delivered.ChatList render={props => <Delivered.ChatListUI {...props} />} />
            <Delivered.CreateChat render={props => <Delivered.CreateChatUI {...props} />} />
        </div>

        <div className='chat-right'>
            <Delivered.ChatTitle render={props => <Delivered.ChatTitleUI {...props} />} />
            <Delivered.SearchChats render={props => <Delivered.SearchChatsUI {...props} />} />

            <div className='profile'>
                <Delivered.UserProfile render={props => <Delivered.UserProfileUI {...props} />} />
                <Delivered.UserInvites render={props => <Delivered.UserInvitesUI {...props} />} />
                <Delivered.Contacts render={props => <Delivered.ContactsUI {...props} />} />
                <Delivered.Devices render={props => <Delivered.DevicesUI {...props} />} />

                <Delivered.ChatProfile render={props => <Delivered.ChatProfileUI {...props} />} />
                <Delivered.ChatMembers render={props => <Delivered.ChatMembersUI {...props} />} />
                <Delivered.ChatInvites render={props => <Delivered.ChatInvitesUI {...props} />} />
                <Delivered.InviteButtons render={props => <Delivered.InviteButtonsUI {...props} />} />
            </div>

            <Delivered.MessagesBox render={props => <Delivered.MessagesBoxUI {...props} />} />

            <div className='send-message'>
                <Delivered.SearchGif render={props => <Delivered.SearchGifUI {...props} />} />
            </div>
        </div>

        <Delivered.Debug render={props => <Delivered.DebugUI {...props} />} />
    </div>

</Delivered.Root>

All Delivered UI components are named after their respective container components, with an appended ‘UI’ at the end. If you would prefer to add specific components one by one, please read on in the next section or skip straight to the component you wish to add in the navigation.

Next: ChatList