reactchatt v1.0.6

react chat component

Getting Started

npm install reactchatt

Demo

Playground

Usage

import { ReactChat } from "reactchatt";

<ReactChat messages={messages} />;

User guide

Props

Events

Message types

1. MessageProps - common message type.
2. MessageTextProps;

interface MessageTextProps {
	text: string;
	id: string;
	title: string;
	avatar?: string;
	status: MessageStatus;
	edited?: boolean;
	date: Date;
	dateFormat?: string;
	type: "text";
	repliedMessage?: MessageProps;
	owner: Owner;
}

3. MessageFileProps

interface MessageFileProps {
	caption?: string;
	needTitle?: boolean;
	files: Array<File>;

	id: string;
	title: string;
	avatar?: string;
	position: "left" | "right";
	status: MessageStatus;
	pending?: boolean;
	edited?: boolean;
	date: Date;
	dateFormat?: string;
	type: "file";
	repliedMessage?: MessageProps;
	owner: string;
}

export interface File {
	id: string;
	type: "img" | "doc";
	title: string;
	url: string;
	secondary?: string;
}

4. MessageImageProps

interface MessageImageProps {
	caption?: string;
	images: Array<Image>;
	id: string;
	title: string;
	avatar?: string;
	status: MessageStatus;
	edited?: boolean;
	date: Date;
	dateFormat?: string;
	type: "img";
	repliedMessage?: MessageProps;
	owner: string;
}

export interface Image {
	id: string;
	title: string;
	url: string;
	width: number;
	height: number;
}

Custom renders

Types

type MessageOrder = "start" | "end" | "middle" | "single";

enum MessageStatus {
	created = 0,
	pending = 1,
	sent = 2,
	read = 3,
	error = 4,
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

P.S.

I am open for job offers :) { mail: zey.verdiyev@gmail.com, telegram: @mirluiz }