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 and mitter-web-react
  • components object from mitter-web-react exposes all the default UI components provided by mitter
  • overrideComponents 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

import React, from 'react';
import { Mitter } from 'mitter-web-core';
import { components, overrideComponents } from 'mitter-web-react';

const { ChannelWindow } = components;
const Mitter = new Mitter("<application-id>", "<mitter-user-id>", "<mitter-user-token>");

const MyComponent = () => {
  return <ChannelWindow mitter={this.mitter} channelId="<mitter-channel-id>" />;
}

export MyComponent;

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

import * as firebase from 'firebase';

...

const fcm = firebase.initializeApp({
    messagingSenderId: "",
    apiKey: "",
    projectId: "",
});

...

this.mitter.configureFCM(fcm);

At this point, any incoming messages belonging to the channel will be rendered in the ChatWindow component automatically.