Overview

There are several components that can be placed at will in your application. However, please note that all components of the Delivered SDK need to be placed within the Root component in order to function.

Working example:

<Delivered.Root lang={this.state.lang} token={this.state.token} provider='firebase' config={deliveredConfig} >
    <Delivered.ChatView />

    <div className="chat-container">
        <Delivered.ChatList />

        <div className="chat-right">
            <Delivered.ChatTitle />

            <Delivered.SearchChats />
            <Delivered.UserProfile />
            <Delivered.ChatProfile />
            <Delivered.MessagesBox />

            <Delivered.MessageInput />
        </div>

        <Delivered.Debug />
    </div>

</Delivered.Root>

This will not work:

<Delivered.Root lang={this.state.lang} token={this.state.token} provider='firebase' config={deliveredConfig} >
</Delivered.Root>

<Delivered.ChatView />

    <div className="chat-container">
        <Delivered.ChatList />

        <div className="chat-right">
            <Delivered.ChatTitle />

            <Delivered.SearchChats />
            <Delivered.UserProfile />
            <Delivered.ChatProfile />
            <Delivered.MessagesBox />

            <Delivered.MessageInput />
        </div>

        <Delivered.Debug />
    </div>

Next: ChatList