React CHATKIT with Socket IO - DevMuhammad
Table of Contents
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.