@devmuhammad/react-chatkit NPM

React CHATKIT with Socket IO - DevMuhammad

About

This is a react package for implementing Socket IO on the frontend client side with mobile responsiveness across all devices.

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system. See references for links to dashboard and API documentation.

Installation

$ npm install @devmuhammad/react-chatkit

# or
$ yarn add @devmuhammad/react-chatkit

Usage

import React from 'react';
import { ChatKit } from '@devmuhammad/react-chatkit';

export default function App() {
   const config = {
    chatTheme?: 'cyan',
    activeRoom: '2',
    name: 'Akoh Bala',
    userId: 'aZ122dsw3',
    rooms?: {},
    socketURL: "https://chaturl.com/chat",
    chatBubble?: '#fff',
    darkModeSwitch?: false,
    bgColorLight?: "#EEEEE",
    bgColorDark?: "#EEEEE",
    textColorLight?: "#EEEEE",
    textColorDark?: "#EEEEE",
    width?: 80,
    height?: 75,
    child?: <PollComponent />
  };

 

  return (
    <div className="App">
      <ChatKit {...config} />
    </div>
  );
}

Parameters:

Parameter	Optional	Default Value	Description
socketURL	false	N/A	Server Socket URL.
userId	false	uuid()	Your preffered userId for current user, Will be autogenerated if not provided.
activeRoom	false	"general"	Active room for connecting user.
name	false	guest	Your preffered default chat name for current user.
rooms	true	{}	List of available rooms.
chatTheme	true	'gray'	Your preffered theme for the application - gray,red,blue,green,orange,yellow,teal,cyan,purple,pink.
chatBubble	true	'gray'	Your preffered chat bubble color, Can use chat theme or your specified color in hex.
width	true	100	Preffered chatbox width, Value is in %. Only number accepted.
height	true	100	Preffered chatbox height, Value is in vh. Only number accepted.
darkModeSwitch	true	true	To allow user toggle dark-mode/lightmode based on defined colors.
child	true	N/A	A predefined react component that will appear above the chat. e.g polls,games.
bgColorLight	true	N/A	Your preffered background color on light mode, Will be ignored if chat theme is provided.
bgColorDark	true	N/A	Your preffered background color on dark mode, Will be ignored if chat theme is provided.
textColorLight	true	N/A	Your preffered text color on light mode, Will be ignored if chat theme is provided.
textColorDark	true	N/A	Your preffered text color on dark mode, Will be ignored if chat theme is provided.

Built Using

App was built with Next.js and chakra-ui with built-in TypeScript with socket.io for chat.

Typescript
React
Socket.io
Chakra UI

Author

Devmuhammad/Devmoh - shuaibola12@gmail.com

If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.ts.

@devmuhammad/react-chatkit v1.0.1