sendbird-uikit-src

Sendbird UIKit for JavaScript is a development kit with a user interface, offering a simplified integration into chat.

Showing:

Popularity

Downloads/wk

6

GitHub Stars

13

Maintenance

Last Commit

1mo ago

Contributors

5

Package

Dependencies

5

License

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

Sendbird UIKit for React

Platform Languages npm

Table of contents

  1. Introduction
  2. Before getting started
  3. Getting started
  4. UIKit at a glance
  5. Appendix

Introduction

Sendbird UIKit for React is a development kit that enables fast and easy integration of standard chat features into new or existing applications. From the overall theme to individual styles such as colors and fonts, components can be fully customized to create an in-app chat experience unique to your brand identity.

Note: Currently, UIKit for React now supports both group channels and open channels.

Benefits

  • Easy installation
  • Fully-featured chat with a minimal amount of code
  • Customizable components, events, and views
  • Customizable user list to enable chat among specified users

ThemeLight

More about Sendbird UIKit for React

Find out more about Sendbird UIKit for React on UIKit for React doc. If you have any comments or questions regarding bugs and feature requests, visit Sendbird community.


Before getting started

This section shows the prerequisites you need to check to use Sendbird UIKit for React.

Requirements

The minimum requirements for Sendbird UIKit for React are:

  • React 16.8.0+
  • React DOM 16.8.0+
  • Sendbird Chat SDK for JavaScript 3.0.115+
  • css-vars-ponyfill 2.3.2
  • date-fns 2.16.1

Getting started

This section gives you information you need to get started with Sendbird UIKit for React.

Try the sample app

Our sample app has all the core features of Sendbird UIKit for React. Download the app from our GitHub repository to get an idea of what you can build with the actual UIKit before building your own project.

Install UIKit for React with npm or yarn

Enter the following on the command line with npm to install Sendbird UIKit.

Note : The minimum requirements for UIKit must be installed on your system to use npm.

npm install sendbird-uikit --save

or with yarn.

yarn add sendbird-uikit

Implement UIKit to your web app

Implement UIKit to your web app by either using the App component or combining smart components to build a chat service customized to your needs.

import { SendBirdProvider, withSendBird, App ... } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

To use the App component, add the following pattern:

import { App as SendBirdApp } from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const App = () => (
    <Route id={'/chat'}>
        <App appId={appId} userId={userId} />
    </Route>
)

To use smart components, add the following pattern:

import {
    SendBirdProvider,
    ChannelList,
    ChannelSettings,
    Channel,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const App = () => (
    <SendBirdProvider>
        ... other components
        <Route id={'/chat'}>
            <LeftPane>
                <ChannelList onChannelSelect={channel => setCurrentChannel(channel.url)}/>
            </LeftPane>
            <CenterPane>
                <Switch case={currentChannel}>
                    <Route id={channelUrl1}>
                        <Channel channelUrl={channelUrl1} />
                    </Route>
                    <Route id={channelUrl2}>
                        <Channel channelUrl={channelUrl2} />
                    </Route>
                </Switch>
            </CenterPane>
            <RightPane>
                <ChannelSettings channelUrl={currentChannel} />
            </RightPane>
        </Route>
    </SendBirdProvider>
)

To show a list of channels or change channels based on routes, implement as below:

import {
    SendBirdProvider,
    ChannelList,
    Channel,
} from "sendbird-uikit";
import "sendbird-uikit/dist/index.css";

const App = () => {
    <SendBirdProvider appId={appId} userId={userId} ...>
        <Router>
            <Route>
                <Sidebar>
                    <Channel />
                </Sidebar>
                <Route id={yourApp/channelUrl1}>
                    <MainPanel>
                        <Channel channelUrl={yourApp/channelUrl1} />
                    </MainPanel>
                </Route>
                <Route id={yourApp/channelUrl2}>
                    <MainPanel>
                        <Channel channelUrl={yourApp/channelUrl2} />
                    </MainPanel>
                </Route>
            </Route>
            ...
        </Router>
    </SendBirdProvider>
}

UIKit at a glance

Here is a list of components included in the UIKit.

ComponentDescription
SendBirdProviderThe context provider that stores Chat SDK for JavaScript and user information.
withSendBirdThe higher-order component to access data from SendBirdProvider.
ChannelListThe UI component that renders channel components in a list.
ChannelThe UI component that allows close interaction among a limited number of users.
ChannelSettingsThe UI component that enables customized settings to be configured to each channel.
AppThe app component that combines all of the above components.

Appendix

Color set for Light and Dark theme

Light Theme variablesValuesDark Theme variablesValues
--sendbird-light-primary-100#dbd1ff #dbd1ff--sendbird-dark-primary-100#dbd1ff #dbd1ff
--sendbird-light-primary-200#c2a9fa #c2a9fa--sendbird-dark-primary-200#c2a9fa #c2a9fa
--sendbird-light-primary-300#742ddd #742ddd--sendbird-dark-primary-300#742ddd #742ddd
--sendbird-light-primary-400#6211c8 #6211c8--sendbird-dark-primary-400#6211c8 #6211c8
--sendbird-light-primary-500#491389 #491389--sendbird-dark-primary-500#491389 #491389
--sendbird-light-secondary-100#a8e2ab #a8e2ab--sendbird-dark-secondary-100#a8e2ab #a8e2ab
--sendbird-light-secondary-200#69c085 #69c085--sendbird-dark-secondary-200#69c085 #69c085
--sendbird-light-secondary-300#259c72 #259c72--sendbird-dark-secondary-300#259c72 #259c72
--sendbird-light-secondary-400#027d69 #027d69--sendbird-dark-secondary-400#027d69 #027d69
--sendbird-light-secondary-500#066858 #066858--sendbird-dark-secondary-500#066858 #066858
--sendbird-light-information-100#adc9ff #adc9ff--sendbird-dark-information-100#adc9ff #adc9ff
--sendbird-light-error-100#fdaaaa #fdaaaa--sendbird-dark-error-100#fdaaaa #fdaaaa
--sendbird-light-error-200#f66161 #f66161--sendbird-dark-error-200#f66161 #f66161
--sendbird-light-error-300#de360b #de360b--sendbird-dark-error-300#de360b #de360b
--sendbird-light-error-400#bf0711 #bf0711--sendbird-dark-error-400#bf0711 #bf0711
--sendbird-light-error-500#9d091e #9d091e--sendbird-dark-error-500#9d091e #9d091e
--sendbird-light-background-50#FFFFFF #FFFFFF--sendbird-dark-background-50#FFFFFF #FFFFFF
--sendbird-light-background-100#eeeeee #eeeeee--sendbird-dark-background-100#eeeeee #eeeeee
--sendbird-light-background-200#e0e0e0 #e0e0e0--sendbird-dark-background-200#e0e0e0 #e0e0e0
--sendbird-light-background-300#bdbdbd #bdbdbd--sendbird-dark-background-300#bdbdbd #bdbdbd
--sendbird-light-background-400#393939 #393939--sendbird-dark-background-400#393939 #393939
--sendbird-light-background-500#2C2C2C #2C2C2C--sendbird-dark-background-500#2C2C2C #2C2C2C
--sendbird-light-background-600#161616 #161616--sendbird-dark-background-600#161616 #161616
--sendbird-light-background-700#000000 #000000--sendbird-dark-background-700#000000 #000000
--sendbird-light-overlay-01rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.55)--sendbird-dark-overlay-01rgba(0, 0, 0, 0.55) rgba(0, 0, 0, 0.55)
--sendbird-light-overlay-02rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.32)--sendbird-dark-overlay-02rgba(0, 0, 0, 0.32) rgba(0, 0, 0, 0.32)
--sendbird-light-onlight-01rgba(0, 0, 0, 0.88) rgba(0, 0, 0, 0.88)--sendbird-dark-onlight-01rgba(0, 0, 0, 0.88) rgba(0, 0, 0, 0.88)
--sendbird-light-onlight-02rgba(0, 0, 0, 0.50) rgba(0, 0, 0, 0.50)--sendbird-dark-onlight-02rgba(0, 0, 0, 0.50) rgba(0, 0, 0, 0.50)
--sendbird-light-onlight-03rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.38)--sendbird-dark-onlight-03rgba(0, 0, 0, 0.38) rgba(0, 0, 0, 0.38)
--sendbird-light-onlight-04rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12)--sendbird-dark-onlight-04rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.12)
--sendbird-light-ondark-01rgba(255, 255, 255, 0.88) rgba(255, 255, 255, 0.88)--sendbird-dark-ondark-01rgba(255, 255, 255, 0.88) rgba(255, 255, 255, 0.88)
--sendbird-light-ondark-02rgba(255, 255, 255, 0.50) rgba(255, 255, 255, 0.50)--sendbird-dark-ondark-02rgba(255, 255, 255, 0.50) rgba(255, 255, 255, 0.50
--sendbird-light-ondark-03rgba(255, 255, 255, 0.38) rgba(255, 255, 255, 0.38)--sendbird-dark-ondark-03rgba(255, 255, 255, 0.38) rgba(255, 255, 255, 0.38)
--sendbird-light-ondark-04rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12)--sendbird-dark-ondark-04rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12)
--sendbird-light-shadow-message-input0 1px 5px 0 rgba(33, 34, 66, 0.12),
0 0 1px 0 rgba(33, 34, 66, 0.16),
0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)
--sendbird-dark-shadow-message-input0 1px 5px 0 rgba(33, 34, 66, 0.12),
0 0 1px 0 rgba(33, 34, 66, 0.16),
0 2px 1px 0 rgba(33, 34, 66, 0.08), 0 1px 5px 0 rgba(0, 0, 0, 0.12)

Color set for all themes

KeyValue
--sendbird-add-reaction-button-border-hover#c2a9fa #c2a9fa
--sendbird-selected-reaction-button-border-hover#c2a9fa #c2a9fa
--sendbird-iconbutton-color#825eeb #825eeb
--sendbird-message-input-border-active#742ddd #742ddd
--sendbird-tooltip-background#000000 #000000
--sendbird-tooltip-text-colorrgba(255, 255, 255, 0.88) rgba(255, 255, 255, 0.88)
--sendbird-button-border-focus#FFFFFF #FFFFFF
--sendbird-file-message-icon-background#FFFFFF #FFFFFF
--sendbird-font-family-default'Open Sans', sans-serif
--sendbird-message-balloon-width404px

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100