mitter-web-react React component


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: "",



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