The ‘Lightning Bolt’ setup that takes 5 minutes or less
The ‘Perfect Blend’ of ease of setup and customization
We'll dive deep into each method, discussing critical features and various technical considerations. You can select one of the three approaches above depending on business needs and customization requirements.
By the end of this tutorial, you’ll have a clear understanding of which approach best suits your needs. Note that even the simplest approach, the “Lightning Bolt” setup, produces a beautiful and clean chat app UI:
Before we dive in, please consider the following prerequisites.
A free Sendbird account. You can quickly set this up in the Sendbird dashboard.
If you’re still in the process of becoming familiar with the Sendbird ecosystem or if you want some background information about the React UIKit, please watch the videos below.
Add the UIKit
<App>component to the application.
That’s all there is!
Why is this approach useful?
Seamless integration with existing React applications: The React UIKit is designed to work seamlessly with existing React applications, allowing you to integrate chat features without disrupting your existing application structure. This is particularly useful for developers looking to add chat functionality to an existing project.
Minimal configuration required: The
<App>component takes care of most of the configuration. By providing your Sendbird Application ID and a Sendbird User ID, you can easily add chat functionality to your application, allowing you to send and receive messages, display message history, and interact in group channels. The ease of setup allows your developers to focus on aspects of your business application core to the business strategy without worrying about also building out a chat app.
Ideal for projects with tight deadlines or limited customization needs: If you're working on a project with strict deadlines, the “Lightning Bolt” approach is the perfect solution because it offers a fast and efficient way to integrate chat features into your app.
If you need more customization or have some unique requirements, consider the next 2 approaches.
Sendbird's React UIKit isn’t limited to single-component usage. By working with the UIKit’s extensive set of pre-built and modular chat UI components, developers can customize a consistent user experience while still significantly reducing development time. Sendbird’s React UIKit allows for quick iteration and adaptation; the Perfect Blend approach involves a combination of speed and customization that the React UIKit allows.
Here’s an overview of the React UIKit and why you should consider this approach:
- Modular, pre-built UI components: These components include the following:
Message input fields
Group and open channels
…and lots more.
Browse the UIKit docs for a comprehensive list of available modules and components.
Simple customization through React components and properties: Customization is as easy as modifying component properties or even creating custom React components. Your custom components can either be plugged into the UIKit’s components or added into the application UI directly. This flexibility allows developers to tailor the chat app's appearance and behavior to their specific requirements.
A balance between rapid development and tailored design: By combining pre-built components with the flexibility of React, this approach enables developers to create a unique React chat app while still enjoying a streamlined development process. Developers can choose to implement certain components themselves, while still leveraging other components in the UIKit to speed up the process.
This approach is best suited for developers who require a certain degree of customization but also need to balance speed and feature delivery. We recommend checking out the tutorial about how to build a React chat app with Sendbird’s UIKit!
But how can you decide which approach is right for you?
To determine the best approach for your needs, find the scenario that best matches your present situation.
It's important to note that these approaches are not mutually exclusive, and you can implement a hybrid solution. You can also transition from one approach to another as your requirements evolve.
For instance, you might start with the UIKit’s
By considering your project's unique requirements and constraints, you can choose the approach (or transition among approaches!) that best fits your needs and create a chat app that delights your users. With Sendbird's powerful tools and flexible platform, the possibilities for building an engaging and feature-rich chat app are endless.
If you need more help, please see the docs or reach out to the Sendbird Community. You’ll find plenty of developers and Sendbird experts there! We also recommend that you visit the developer portal to browse all of Sendbird’s developer resources. If you’d like to talk to us directly, please contact us. Our experts are always happy to help!