react chat component

Getting Started

1npm install reactchatt

Demo

Playground

Usage

1import { ReactChat } from "reactchatt";
2
3<ReactChat messages={messages} />;

User guide

Props

	Description	Type	Default
messages	Array of messages	Array<MessageProps>	[]
placeholder	Composer placeholder	string	Write
typing	Typing animation	boolean	false
typingInfo	Typing information (e.g Who is typing)	string	false
icon	Show user's icons	boolean	false
title	Show user's titles	boolean	false
threshold	Edge reach threshold trigger	number	0
loading	Loading animation	boolean	false
date	Show date on messenger body	boolean	true
dateFormat	Messenger date format	boolean	'MMMM D'

Events

	Description	Type
onMessageClick	Message click	(id: string) => void
onMessageDblClick	Message double click	(id: string) => void
onMessageItemClick	Message item click callback (e.g Multi messages)	(message: string, id: string) => void;
onMessageLongClick	Message long Touch (mobile)	(id: string) => void
onPulled	Message Pulled (mobile) (temp unstable)	(id: string) => void
onMessageContext	On message context click	(id: string) => void
onEdgeReach	Edge reach by scrolling	() => void
onMessageSystemDateClick	Days Click	(date: Date) => void
onReplyMessageClick	Reply part clicked of message	(messageId: string, parentId?: string) => void

Message types

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

1interface MessageTextProps {
2	text: string;
3	id: string;
4	title: string;
5	avatar?: string;
6	status: MessageStatus;
7	edited?: boolean;
8	date: Date;
9	dateFormat?: string;
10	type: "text";
11	repliedMessage?: MessageProps;
12	owner: Owner;
13}

3. MessageFileProps

1interface MessageFileProps {
2	caption?: string;
3	needTitle?: boolean;
4	files: Array<File>;
5
6	id: string;
7	title: string;
8	avatar?: string;
9	position: "left" | "right";
10	status: MessageStatus;
11	pending?: boolean;
12	edited?: boolean;
13	date: Date;
14	dateFormat?: string;
15	type: "file";
16	repliedMessage?: MessageProps;
17	owner: string;
18}
19
20export interface File {
21	id: string;
22	type: "img" | "doc";
23	title: string;
24	url: string;
25	secondary?: string;
26}

4. MessageImageProps

1interface MessageImageProps {
2	caption?: string;
3	images: Array<Image>;
4	id: string;
5	title: string;
6	avatar?: string;
7	status: MessageStatus;
8	edited?: boolean;
9	date: Date;
10	dateFormat?: string;
11	type: "img";
12	repliedMessage?: MessageProps;
13	owner: string;
14}
15
16export interface Image {
17	id: string;
18	title: string;
19	url: string;
20	width: number;
21	height: number;
22}

Custom renders

	Description	Type
renderTextMessage	Custom text message	(message: MessageTextProps, order: MessageOrder) => JSX.Element
renderImageMessage	Custom image message	(message: MessageImageProps,order: MessageOrder) => JSX.Element
renderFileMessage	Custom file message	(message: MessageFileProps, order: MessageOrder) => JSX.Element
renderAnyMessage	Any message render. Just put type -> 'any'	(message: MessageCoreProps, order: MessageOrder) => JSX.Element

Types

1type MessageOrder = "start" | "end" | "middle" | "single";
2
3enum MessageStatus {
4	created = 0,
5	pending = 1,
6	sent = 2,
7	read = 3,
8	error = 4,
9}

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 }