@devmuhammad/react-chatkit
v1.0.1
Published
This is a react package for implementing Socket IO on the frontend client side with mobile responsiveness across all devices.
Downloads
8
Maintainers
devmuhammadReadme
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] - [email protected]
If you don't have multi-direction app, you should make <Html lang="ar" dir="rtl"> inside _document.ts.