mitter-web-react
Provides React UI components for mitter.
Create a simple chat window using mitter
The following code snippet will create a simple chat window.
- We import
react
,mitter-web-core
andmitter-web-react
components
object from mitter-web-react exposes all the default UI components provided by mitteroverrideComponents
function is used to provide custom components which will override mitter defaults
- Next we create an instance of
Mitter
using applicationId, userId and userToken provided by mitter ChannelWindow
component will render messages of a channel given by channelId and a chat text input
;;; const ChannelWindow = components;const Mitter = "<application-id>" "<mitter-user-id>" "<mitter-user-token>"; const MyComponent = { return <ChannelWindow mitter=thismitter channelId="<mitter-channel-id>" />;} ;
ChatWindow fills 100% width and 100% height of the parent component.
Connecting with FCM
mitter-web-core
provides web binding for FCM to receive the downstream data via FCM
To bind FCM with mitter
- Import firebase for web library
- Create firebase object using senderId, apiKey and projectId which you can obtain from FCM console
- Use the
configureFCM
function of mitter to configure it with the firebase instance we just created
; ... const fcm = firebase; ... thismitter;
At this point, any incoming messages belonging to the channel will be rendered in the ChatWindow component automatically.