0.4.1-alpha2 • Published 6 years ago
mitter-web-react v0.4.1-alpha2
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
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.