mitter-web-react
mitter-web-react React component
Last updated 3 years ago by ganessh-mitter .
Apache-2.0 · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install mitter-web-react 
SYNC missed versions from official npm registry.

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

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.

Current Tags

  • 0.4.1-alpha2                                ...           latest (3 years ago)

6 Versions

  • 0.4.1-alpha2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.0.3                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Downloads
Today 0
This Week 0
This Month 3
Last Day 0
Last Week 1
Last Month 5
Dependencies (7)
Dev Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |