provider.md

UIKitProvider

agora-chat-uikit provides the UIKitProvider component for data management. UIKitProvider does not render any UI, but only provides the global context for components. It automatically listens for SDK events, passes data down in the React component hierarchy, and drives component rendering. Other components in UIKit must be wrapped with UIKitProvider.

Usage example

import React from 'react';
import { UIKitProvider } from 'agora-chat-uikit';
import 'agora-chat-uikit/style.css';
import ChatApp from './ChatApp'
ReactDOM.createRoot(document.getElementById('root') as Element).render(
  <div>
    <UIKitProvider
      initConfig={{
        appKey: 'your app key',
        userId: 'userId',
        token: 'chat token'
      }}
      // All the UI texts can be viewed in the URL: https://github.com/easemob/Easemob-UIKit-web/tree/dev/local
      local={{
        fallbackLng: 'en',
        lng: 'en',
        resources: {
          en: {
            translation: {
              'conversationTitle': 'Conversation List',
              'deleteCvs': 'Delete Conversation',
              // ...
            },
          },
        },
      }}

      reactionConfig={{
        map: {
            'emoji_1': <img src={'customIcon'} alt={'emoji_1'} />,
            'emoji_2': <img src={'customIcon'} alt={'emoji_2'} />,
        }
      }}

      features={{
        conversationList: {
          // search: false,
          item: {
            moreAction: false,
            deleteConversation: false,
          },
        },
        chat: {
          header: {
            threadList: true,
            moreAction: true,
            clearMessage: true,
            deleteConversation: false,
            audioCall: false,
          },
          message: {
            status: false,
            reaction: true,
            thread: true,
            recall: true,
            translate: false,
            edit: false,
          },
          messageEditor: {
            mention: false,
            typing: false,
            record: true,
            emoji: false,
            moreAction: true,
            picture: true,
          },
        },
      }}
      theme={{
        primaryColor: '#00CE76' // Hexadecimal color value
      }}
    >
      <ChatApp></ChatApp>
    </UIKitProvider>
  </div>,
);

Overview of UIKitProvider

Props	Type	Description
initConfig	ProviderProps['initConfig']	You can configure the appKey.
local	ProviderProps['local']	For the local UI texts, you can configure the parameters of the i18next init method.
features	ProviderProps['features']	What functions are used for global configuration. By default, all functions are displayed. If the features are also configured in the component, the configuration in the component will prevail.
reactionConfig	ProviderProps['reactionConfig']	Global reaction emoticon configuration. If this parameter is also configured in the message component, the configuration in the message component shall prevail
onError	ProviderProps['onError']	OnError event in SDK.