https://github.com/peterkottas/react-bell-chat
:bell: Easy to use chat user interface for React
https://github.com/peterkottas/react-bell-chat
chat chat-application chatapp react reactjs ux-ui
Last synced: about 1 year ago
JSON representation
:bell: Easy to use chat user interface for React
- Host: GitHub
- URL: https://github.com/peterkottas/react-bell-chat
- Owner: PeterKottas
- License: mit
- Created: 2018-04-25T17:04:27.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2023-07-08T13:37:46.000Z (almost 3 years ago)
- Last Synced: 2024-10-23T09:13:09.444Z (over 1 year ago)
- Topics: chat, chat-application, chatapp, react, reactjs, ux-ui
- Language: JavaScript
- Homepage: https://peterkottas.github.io/react-bell-chat/
- Size: 3.81 MB
- Stars: 54
- Watchers: 2
- Forks: 9
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :bell: react-bell-chat
A library of React components for building chat UIs.
# DEMO
[Live demo](https://peterkottas.github.io/react-bell-chat/)
[](https://nodei.co/npm/react-bell-chat/)
## Features
* Chat like scroll behavior (eg. automatic scroll to bottom)
* Load more messages on scrolling to the top (with custom threshold)
* SUPER easy to use
* Customize anything
* Author avatars
* Last seen messages for each author
* Show if authors are typing or not
* Automatic date rows (when the following message is from a different date than the preceding one)
Keep in mind that this project is still in the early stages of development. If you encounter a bug or have a feature request, please create an issue.
## Installation
`npm install react-bell-chat --save`
OR
`yarn add react-bell-chat`
## Basic Usage
```typescript
import { ChatFeed } from 'react-bell-chat'
// Your code stuff...
render() {
return (
// Your JSX...
// Your JSX...
)
}
```
The bare minimum is to provide a list of messages and authors, check this out for an example:
```typescript
//...
this.state = {
messages: [
{
id: 1,
authorId: 1,
message: "Sample message",
createdOn: new Date(),
isSend: true
},
{
id: 2,
authorId: 2,
message: "Second sample message",
createdOn: new Date(),
isSend: false
},
],
authors: [
{
id: 1,
name: 'Mark',
isTyping: true,
lastSeenMessageId: 1,
bgImageUrl: undefined
},
{
id: 2,
name: 'Peter',
isTyping: false,
lastSeenMessageId: 2,
bgImageUrl: undefined
}
]
};
//...
```
Complete props for author:
typescript
```
export interface Author {
id: number;
name: string;
avatarName?: string;
lastSeenAvatarName?: string;
isTyping?: boolean;
lastSeenMessageId?: number;
bgImageUrl?: number;
}
```
Complete props for message:
typescript
```
export interface Message {
id?: number;
authorId?: number; // If undefined, message is considered to be "System message"
message: string;
createdOn?: Date;
isSend?: boolean;
}
```
## API
Api is obtained as ref of the ChatFeed component. It's divided in 2 parts, feedApi and scrollApi. Ref gives you and object like this:
```typescript
interface ChatFeedApi {
onMessageSend: () => void; // Should be called when user sends a message (this scrolls the component down)
scrollApi: ChatScrollAreaApi;
}
```
Where scroll api is
```typescript
interface ChatScrollAreaApi {
scrollToBottom: (behavior?: ScrollBehavior) => void;
scrollTo: (top: number) => void;
scrolledToBottom: () => boolean; // Check if we are scrolled to bottom
scrolledToLoadThreshold: () => boolean; // Check if we are scrolled to threshold where we need to load messages
}
```
## Whole list of properties
```typescript
export interface ChatFeedProps {
// Structural props
className?: string;
// Functional props
messages: Message[];
authors: Author[];
yourAuthorId: number;
hasOldMessages?: boolean;
loadOldMessagesThreshold?: number;
// Visual props
bubblesCentered?: boolean;
bubbleStyles?: ChatBubbleStyles;
maxHeight?: string | number;
minHeight?: string | number;
// Switches
showDateRow?: boolean;
showRecipientAvatar?: boolean;
showRecipientLastSeenMessage?: boolean;
showIsTyping?: boolean;
showLoadingMessages?: boolean;
// Extra container styles for custom components
showRecipientAvatarChatMessagesStyle?: React.CSSProperties;
showRecipientLastSeenMessageChatMessagesStyle?: React.CSSProperties;
showIsTypingChatMessagesStyle?: React.CSSProperties;
// Custom components
customLoadingMessages?: (props: LoadingMessagesProps) => JSX.Element;
customChatBubble?: (props: ChatBubbleProps) => JSX.Element;
customSystemChatBubble?: (props: ChatBubbleProps) => JSX.Element;
customAvatar?: (props: AvatarProps) => JSX.Element;
customScrollArea?: (props: ChatScrollAreaProps) => JSX.Element;
customIsTyping?: (props: ChatScrollAreaProps) => JSX.Element;
customLastSeenAvatar?: (props: LastSeenAvatarProps) => JSX.Element;
customDateRow?: (props: DateRowProps) => JSX.Element;
// Callbacks
onLoadOldMessages?: () => Promise; // Make sure to return promise that only resolves after state is updated.
ref?: (api: ChatFeedApi) => void;
}
```
## Custom components
Most of the UI is customizable via injecting custom components. These are pure components, the library injects props to them so that you can customize pretty much anything.
## FAQ
Q: My chat is scrolling up/down automatically every time I use setState on parent component.
A: Make sure to provide const expressions for custom components. Not inline functions.
## Created and sponsored by
- [GuestBell](https://guestbell.com/) - Customer centric online POS for Hotels and short terms stays.
## Contributing 🔧
Contributions are always welcomed and encouraged.
## Development
```sh
npm run start
```
## Acknowledgments
This lib started as a fork from https://github.com/brandonmowat/react-chat-ui