Add chat to your app | React | Chat API & SDK

Prerequisites

React 16.8 or higher
Weavy 8.2 or higher

You may also integrate Weavy into an existing app instead of creating a new app, just skip the create a new react app step.

Create a new react app using NPX

NPX is the script manager that comes with Node and NPM, which you may use to create a new react app. React will recommend you to use yarn or npm depending on if you have yarn installed or not.

npx create-react-app weavy-react-app
cd weavy-react-app
yarn start

This will build and launch the dev server, usually on http://localhost:3000

Add the Weavy Script

The simplest way to add the Weavy script is to just add it to the head section in the public/index.html. Replace {your-server-domain} with the domain name of your own Weavy server.

index.html

<head>
    ...
    <script src="https://{your-server-domain}/javascript/weavy.jquery.js"></script>
</head>

Create a shared Weavy context

To be able to link the Weavy instance to Weavy Chat without passing down properties we take advantage of a shared state using a shared context. The Weavy instance component will act as the provider and Weavy Chat component as the consumer. Create a new file src/weavy/WeavyContext.js to hold the shared context.

WeavyContext.js

import React from 'react';
export default React.createContext();

Create a Weavy instance component

To optimize performance we use a common Weavy instance in a component src/weavy/Weavy.js. The instance is linked to the Weavy Chat using the Weavy context. To provide authentication, we prepare the instance to connect a JWT token provider from a property. We delay the initialization to provide recommended creation and cleanup.

Weavy.js

import { Component } from 'react';
import './Weavy.css';
import WeavyContext from './WeavyContext';
export default class Weavy extends Component {
    constructor(props) {
        super(props);
        this.state = { weavy: new window.Weavy({ jwt: props.jwt, init: false })};
    };
    componentDidMount() {
        this.state.weavy.init();
    }
    componentWillUnmount() {
        this.state.weavy.destroy();
    };

    render() {
        return <WeavyContext.Provider value={this.state}>{this.props.children}</WeavyContext.Provider>;
    };
}

Create a Weavy Chat component

The Weavy Chat component src/weavy/WeavyChat.js will define a Weavy space, then define the Weavy chat app in a div. The Weavy instance will be referenced from the consumed context. The space and chat app are defined from component properties.

Spaces are used in Weavy to group apps around a subject or entity. Within those spaces are members. Any members within a space have access to any apps within that space.

In order to set up the Weavy space, we need a unique identifier - the key. Keys must be unique because they are used to grab the contextual information for that specific space or app. Any unique identifier will do - it just can't be too long.

Learn more about spaces - Spaces & Client Structure

WeavyChat.js

import { Component } from 'react';
import './Weavy.css';
import WeavyContext from './WeavyContext';

export default class WeavyChat extends Component {
    static contextType = WeavyContext;

    async createWeavyChat() {
        this.weavySpace = this.weavy.space({
            key: this.props.spaceKey,
            name: this.props.spaceName
        });

        this.weavyChat = this.weavySpace.app({
            key: this.props.appKey,
            type: this.props.appType,
            name: this.props.appName,
            container: this.el
        });
    }


    componentDidMount() {
        this.weavy = this.context.weavy;
        this.createWeavyChat();
    }

    shouldComponentUpdate(nextProps){
        // A key must change for the app to change
        var spaceChanged = nextProps.spaceKey !== this.props.spaceKey;
        var appChanged = nextProps.appKey !== this.props.appKey;
        return spaceChanged || appChanged;
    }

    componentDidUpdate(prevProps) {
        this.weavyChat.remove();
        this.createWeavyChat();
    }

    componentWillUnmount() {
        this.weavyChat.remove();
    };

    render() {
        return <div className="weavy-container" ref={el => this.el = el} />;
    };
}

Style the Weavy container

Weavy apps will automatically size themselves to the container, so we need to set a size on the Weavy container. Set the height in a stylesheet src/weavy/Weavy.css

Weavy.css

.weavy-container {
    height: 100vh;
}

Using the Weavy components

The Weavy instance component is only used as a wrapper. You can put it anywhere in your app. The important thing is to place the Weavy Chat component anywhere inside the wrapper. Import the components in your src/App.js and use the components. You also need to define a JWT token provider and set it as a property on the Weavy instance component.

See Docs - Client Authentication to read more about setting up JWT authentication.

JWT Token must be set up correctly with exp, iss, sub, and the client secret in order for Weavy to work

Both the Weavy Component and the WeavyChat Component will clean up themselves when removed.

App.js

import { Component } from 'react';
import './App.css';
import Weavy from './weavy/Weavy';
import WeavyChat from './weavy/WeavyChat';

export default class App extends Component {
    async getJwt() {
        return '[Provide your JWT here]';
    }

    render() {
        return (
            <Weavy jwt={this.getJwt}>
                <div className="App">
                    <WeavyChat
                        spaceKey="react-space"
                        spaceName="React Space"
                        appKey="react-chat"
                        appName="React Chat"
                        appType="messenger"
                    />
                </div>
            </Weavy>
        );
    }
}

That's it!

Now you have a fully customizable Weavy Chat component to integrate anywhere in your React web app!

Let's Add Chat