Modules

UIKit for React provides modules that act as smart components containing providers and pre-built UI components to create a functional chat view. There are eight modules in UIKit, which build and display all chat views with customizable UI.

To view the image in full screen, click on the

The following diagrams show the basic architecture of UIKit for React.

To view the image in full screen, click on the

In each module, there is a context provider and a set of UI components. The provider is the operator of a context that handles all the logic and data used in UIKit. It creates and operates necessary data from the Chat SDK, such as channel information or user list, that are used to build views.

To view the image in full screen, click on the

To exchange data between the provider and the UI components, the module uses a useContext hook. Every UI component of any layer or level can get access to data using the context hook as long as they're using the same provider.

To view the image in full screen, click on the

While the provider manages all the data of each module, the UI component renders user interfaces that are used to display the view of the module. There's a set of pre-built UI components that are used as default to build the view of each module. The components use the context hook to access the provider's data. All UI components are customizable by setting the input props with custom components.