Requirements
The minimum requirements for QuickBlox UIKit for React are:- JS QuickBlox SDK v2.15.5
- React v.18.0
- TypeScript v.4.9.3
Before you begin
Register a new account following this link. Type in your email and password to sign in. You can also sign in with your Google or GitHub accounts. Create the app clicking New app button. Configure the app. Type in the information about your organization into corresponding fields and click Add button. Go to Dashboard => YOUR_APP => Overview section and copy your Application ID, Authorization Key, Authorization Secret, and Account Key .Helicopter overview
Before you start coding, let’s provide a brief introduction and explain the steps for developers. Firstly, you should install our JS SDK and UIKit. Secondly, you need to create a session, log in using the credentials of an already registered user, and connect to the chat.Install QuickBlox SDK
JavaScript
Install QuickBlox UIKit
JavaScript
Init QuickBlox SDK
To init QuickBlox SDK you need to pass Application ID, Authorization Key, Authorization Secret, and Account Key to the init() method.JavaScript
SecurityIt’s not recommended to keep your authKey and authSecret inside an application in production mode, instead of this, the best approach will be to store them on your backend. Instead you can initialize QuickBlox SDK without Authorization Key and Secret
Authentication
Before sending your first message you need to authenticate users in the QuickBlox system. You can read more about different ways of authentication by this link. In our example we show how to authenticate user with login and password.JavaScript
Get started
The entire process consists of several steps:- Creating a React Project with TypeScript
- Adding Dependencies to a React Project
- Adding QBconfig.ts File to Your React Application
- Perhaps updating the project structure according to your needs
- Configure QuickBloxUIKitProvider
Step 1. Creating a React Project with TypeScript and Webpack
In this section, we will guide you through creating a new React project using TypeScript and Webpack without usingcreate-react-app
. This manual setup gives you complete control over the build process, which is useful when integrating advanced SDKs and UIKits.
Initializing the Project
- Open your terminal and create a new project directory:
tsconfig.json
in the root folder:
webpack.config.js
file (see example in the QuickBlox repository for a complete working configuration
webpack.config.js).
Creating the Project Structure
Manually create the following folder and file structure:
public/index.html
src/index.tsx
, add the following code:
package.json
, update the scripts section to include:
Step2. Adding Dependencies to a React Project
To successfully integrate QuickBlox functionality into your React project, you need to add two main dependencies:quickblox
and quickblox-react-ui-kit
. By following the documentation, you can easily add these packages to your project.
Installing Dependencies
- Open your command prompt or terminal and navigate to the root folder of your React project.
- Run the following command to install the
quickblox
package:
Powershell
- Then, execute the following command to install the
quickblox-react-ui-kit
package:
Powershell
- Open the file where you want to use QuickBlox functionality, such as App.tsx
- Add the following lines at the beginning of the file to import the dependencies:
Note: use // @ts-ignorWe are using // @ts-ignor in TypeScript because QuickBlox SDK doesn’t share types.
JavaScript
Step 3. Adding QBconfig.ts File to Your React Application
To ensure proper configuration and functionality of the QuickBlox UIKit in your React application, it is essential to add a QBconfig.ts file to the src folder. This file allows you to define the necessary parameters for the QuickBlox UIKit. The QBconfig.ts file contains various configuration settings that determine how the QuickBlox UIKit interacts with the QuickBlox JavaScript SDK and the backend services. These settings include:- appId: This parameter represents the unique identifier assigned to your QuickBlox application. It helps establish a connection between the frontend and backend components.
- authKey and authSecret: These parameters are used for authentication purposes. They ensure secure communication between your application and the QuickBlox backend.
- accountKey: This parameter identifies your QuickBlox account and provides access to the associated services.
- apiEndpoint and chatEndpoint: These parameters define the API and chat endpoints provided by QuickBlox. They specify the URLs to which the QuickBlox UIKit will send requests for various functionalities.
JavaScript
Note: if the SDK was initialized using a session token, use the same sessionToken in the UIKit.If you initialize your SDK using a session token, you need to not only fill the sessionToken field in QBConfig but also fill other properties in the same way as when using the initWithAppId method. See the link initialize QuickBlox SDK without Authorization Key and Secret
TypeScript
Step 4. Updating the project structure according to your needs
In order to enhance the organization and maintainability of your project, it is recommended to make changes to the structure of the App.tsx in the src folder. You need to add a constant called “currentUser” inside the App() function in the App.tsx file, which describes your user registered in the admin panel, and configure the QuickBloxUIKitProvider. Additionally, import the necessary entities fromquickblox-react-ui-kit
.
As a result, you should have the code below:
TypeScript
- maxFileSize - controls the maximum size of uploaded files.
- accountData - information about the application’s account data.
- qbConfig - the configuration file structure contains settings such as session duration for the React Kit, keys for interacting with AI features, and so on.
- loginData - information about the logged-in user.
Step 5. Configure QuickBloxUIKitProvider
To configure QuickBloxUIKitProvider and use QuickBloxUIKit in your application, follow these steps: Initialize DataContext:- To work with QuickBlox, it is necessary to initialize the UIKit react DataContext. It contains important data and settings for using QuickBloxSDK. The DataContext connects various components of the application and provides them access to shared data.
TypeScript
- We need to add user authentication, so to do this, we will introduce two states and use the useEffect hook:
TypeScript
TypeScript
Powershell
Note: you can find the code from this project on our repository.Use this link React Chat UIKit init example.
Quick start for using our React UIKit see, React UIKit Demonstration Sample.This sample implements authorization functionality and provides an example of color theme customization. The sample code is available by this link. How to set up and run a sample, see the article in our blog How to Create a React Chat Application in Just a Few Steps.