UI Components overview

Introduction

ROQ UI Components are plug and play widgets that are fully wired up to the ROQ platform APIs. They are fully functional, and add functionality to your application within just a few lines of code.

Installation

To get started with integrating ROQ UI, you need to wrap your React application into the <RoqProvider/>.

Available UI Components

These UI Components are ready to be used in your project!

Chat system:

• The <Chat/> UI component represents the chat message center with sidebar and the chat window.
• The <ChatMessageBell/> component informs the user about unread messages in the chat.

File management:

• The <FileUpload/> component represents a button which opens a file selector and starts uploads.
• The <FileDropzone/> component represents an area on your application where users can drag and drop files to be uploaded.
• The <FileActiveUploads/> component shows a progress bar of all active files uploads. Users can abort and restart uploads.

Notifications:

• The <NotificationBell/> component renders a bell symbol which informs the user about unread notifications
• The <NotificationModal/> component shows the user's notifications in real-time and also enables the user to configure the preferences.

User invites

• The <UserInvitesTable/> component renders all related components at once. Users can invite other users and manage their invitees in a table.
• The <UserInviteButton/> component renders a button which opens a lightbox. The user can then invite other users.
• The <UserInvitePane/> component renders a pane that allows to invite one or multiple users at once.

Custom styling

You can customize the design of ROQ’s UI components to improve the fit to the look&feel of your application. See the Custom Styling section for more details.

Custom translations

All UI components can be translated into any language. See Custom translations for instructions.