React-swagchat NPM

swagchat UIKit (A set of React components)

swagchat is an open source chat components for your webapps.

This is UIKit for Chat API

Architecture

Related repositories

Installation

CDN

<script src="https://unpkg.com/react-swagchat/dist/react-swagchat.min.js"></script>

npm

npm install --save react-swagchat

Please use TypeScript for development.

react-swagchat provides its own type definitions, so you don't need @types/react-swagchat installed!

Usage

Browser

Using the renderTemplateMessenger function you can create the general chat UI (including screen transition).

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css" media="all">
    <link rel="stylesheet" href="https://unpkg.com/react-swagchat/dist/react-swagchat.min.css">
</head>
<body>
  <div id="swagchat" />
  <script src="https://unpkg.com/react-swagchat/dist/react-swagchat.min.js"></script>
  <script>
      Swag.renderMessenger({
        userId: 'USER_ID',
        apiEndpoint: 'http://localhost:9000/v0',
      });
  </script>
</body>

Node

import { Avatar } from 'react-swagchat';

const AvatarExample = () => (
  <Avatar
    src="https://dummyimage.com/300x300/3768c4/fff&text=circle"
    shape="circle"
    onClick={() => alert("Click")}
  />
);

Development

npm install

npm run build:css (Create type definitions of css file)
npm run build:lib (for Node)
npm run cpx:css (Copy css and css.d.js file globs)
npm run build:dev (for Browser [development])
npm run build:prod (for Browser [production])