react-swizi-chat v0.8.4

Swizi Chat React Component

react-swizi-chat is a React component to easily add chat functionnality to your app.

this component uses swizi-chat-sdk.

Summary

1. Installation

2. Usage

3. Properties

4. Customize style

5. Notifier

Installation

npm i react-swizi-chat or yarn add react-swizi-chat

Usage

Example 1 : display a ChatBox with all channels for this user

import {SwiziChatBox} from 'SwiziChatBox'
class App extends React.Component {
	render () {
		return (
			<SwiziChatBox apikey={"your api key"} userToken={a swizi token for user} />
		)
	}
}

Example 2 : display a ChatBox with a single channel between two users

import React from 'react'
import {SwiziChatBox} from 'SwiziChatBox'
class App extends React.Component {
	render () {
		return (
			<SwiziChatBox apikey={"your api key"} userToken={a swizi token for user} recipientExternalId={'external id of recipient'}/>
		)
	}
}

Example 3 : Open a contact in an existing chatBox

import React from 'react'
import SwiziChatBox from 'SwiziChatBox'

class App extends React.Component {
	render () {
		return (
			<SwiziChatBox apikey={"your api key"}
			userToken={a swizi token for user}
			recipientExternalId={'external id of recipient'}
			ref=>{this.myChatBox=ref}/>
	)
	}
}
...
this.myChatBox.getContactList()
...
this.myChatBox.openContact('recipient id')
...

Example 4 : Open a room in an existing chatBox

import React from 'react'
import SwiziChatBox from 'SwiziChatBox' 
class App extends React.Component {
	render () {
		return (
			<SwiziChatBox 
				apikey={"your api key"}
				userToken={a swizi token for user}
				recipientExternalId={'external id of recipient'}
				ref=>{this.myChatBox=ref}/>
		)
	}
}
...
this.myChatBox.openRoom('room id')
...

Properties

Customize Style

The component can be customized with your own style.

1. Copy /src/components/SwiziChatBox/style.less
2. Replace swizi-chat-box-default-style class with your name
3. Change style and import new css
4. Pass the new class name in clazz property

Notifier

SwiziChatNotifier is an invisible React component to be notified when a message is sent to a Swizi user.

Usage :

import React from 'react'
import { SwiziChatNotifier } from 'SwiziChatBox';

class App extends React.Component {
    let that = this;
    
	render () {
		return (
			<SwiziChatNotifier 
				apikey={"your api key"}
				userToken={a swizi token for user}
				ref=>{this.myChatNotofier=ref}
				onUnreadChanged={
					()=>{
						// Some messages have been marked as read. must update counter
						console.log(that.myChatNotifier.getUnreadCount()+ ' unread messages'
					}
				}
				onMessageReceived={info  => {
					console.log('Message received on room '+info.roomId+' from '+info.from.displayName)
					console.log(that.myChatNotifier.getUnreadCount()+ ' unread messages'
				})
				/>
		)
	}
}