Specta Chat - Web Module

Specta Chat is a React.js & TypeScript package for chatting.

Build

Specta Chat was build on React.js and TypeScript as template. Rollup was used as the bundler of choice. Emotion was used for styling (CSS in JS).

Run BUILD container

npm i

Builds node modules to the node_modules folder.

npm run dev:watch

Runs the app for development with watcher.

When working locally run npm link react (avoids duplicate version of React issues) for the first time and each time when new package has been installed.

Installation into other projects

npm i @spectalabs/specta-chat-web

React.js

Only requires to add the package.

React.js & TypeScript

After adding package, requires to add a new declaration (.d.ts) file containing:

declare module "@spectalabs/specta-chat-web";

Vue.js

Besides adding package, requires to have Vuera installed on Vue.js project. For config details check the already provided link (React in Vue).

Usage

To use the Specta Chat module simply import as:

import { SpectaChat } from "@spectalabs/specta-chat-web";

and use it as:

<SpectaChat
   domain="<any domain name>"
   user={<logged in user object>}
   headerHeight={<any number>}
   className="<any class name>"
   theme="<any hex color code>"
/>

Provided parameters

• domain - (string type)
• user - (object type)
• headerHeight - (number type) - This given parameter aligns module correctly right under the project's header menu, so it is preferred to be passed in
• theme - (string type) - Main application's color
• className - (string type)

Dismiss localStorage

To clear module's localStorage from the projects that was installed, remove the keys on logout():

localStorage.removeItem("viewpath");
localStorage.removeItem("conversations");
localStorage.removeItem("chat");

Latest version: 0.0.5