0.8.4 • Published 1 year ago
@madlogic/chat-react v0.8.4
@madlogic/chat-react
Building on top of the Madlogic Chat API, the Chat React component library includes everything you need to build feature-rich and high-functioning chat user experiences out of the box.
Install
yarn add @madlogic/chat-react
Usage
With Create React App project
// App.jsx
import 'App.css';
import '@madlogic/chat-react/styles.css';
import { ChatProvider, MainChatContainer, ChatSidebarContainer } from '@madlogic/chat-react';
const clientConfig = {
server_url: 'https://chat.madlogic.dev',
workspace_name: 'Test',
};
function App() {
const chatUserToken = 'eyJhbGciOiJ...'; // e.g. localStorage.getItem('chatToken')
return (
<ChatProvider clientConfig={clientConfig} userToken={chatUserToken}>
<div className="chat-box">
<ChatSidebarContainer />
<MainChatContainer />
</div>
</ChatProvider>
);
}
export default App;
Hooks
The @madlogic/chat-react
uses a hook useChat()
to store chat data and dispatch chat actions.
Example
import { useChat } from '@madlogic/chat-react';
// ...
export const CustomChatChannels = () => {
const channels = useChat((state) => state.channels);
const activeChannelId = useChat((state) => state.activeChannelId);
const setActiveChannelId = useChat((state) => state.actions.setActiveChannelId);
const handleChannelClick = (channel) => {
setActiveChannelId(channel.id);
};
return (
<div>
<h1>List of channels</h1>
<ChatChannelList activeChannelId={activeChannelId} channels={channels} onChannelClick={handleChannelClick} />
</div>
);
};
Supported by useChat()
type UseChatState = {
// State
connection: ChatConnection;
user: ChatUser | undefined;
users: ChatUser[];
activeChannelId: string | undefined;
channels: ChatChannel[];
channelSearchText: string;
messages: ChatMessage[];
typingUsers: TypingUser[];
settings: ChatSettings;
// Actions
actions: {
setConnection: (connection: ChatConnection) => void;
setUser: (user: ChatUser) => void;
upsertUsers: (users: ChatUser[]) => void;
setActiveChannelId: (id: string) => void;
updateChannel: (payload: Partial<ChatChannel>) => void;
upsertChannels: (channels: ChatChannel[]) => void;
setChannelSearchText: (text: string) => void;
upsertMessages: (messages: IChatMessage[]) => void;
addTypingUser: (user: TypingUser) => void;
removeTypingUser: (user: TypingUser) => void;
updateSettings: (settings: Partial<ChatSettings>) => void;
};
};
useChatClient()
import '@madlogic/chat-react/styles.css';
import { useEffect } from 'react';
import { useChatClient, ChatProvider, MainChatContainer } from '@madlogic/chat-react';
const clientConfig = {
server_url: 'https://chat.madlogic.dev',
workspace_name: 'Test',
};
const CustomComponent = () => {
const client = useChatClient();
useEffect(() => {
if (!client) return;
client
.queryUsers()
.then((result) => {
console.log(result);
})
.catch((err) => {
console.error(err);
});
}, [client]);
return <div>...</div>;
};
export function ChatBox() {
const userToken = '...';
return (
<ChatProvider clientConfig={clientConfig} userToken={userToken}>
<CustomComponent />
<MainChatContainer />
</ChatProvider>
);
}
Local development
# Develop
yarn dev
# Build
yarn build
Release new version
1. Versioning
Read https://semver.org/ for more details.
// package.json
{
name: '@madlogic/chat-react',
version: '1.0.1', // Bump package version 1.0.0 => 1.0.1
description: 'The chat react component library',
author: 'Madlogic <info@madlogic.nl>',
// ...
}
2. Publishing (to NPM)
yarn release
NPM login is required. Use a Madlogic npm account to log in.
0.8.4
1 year ago
0.8.3
1 year ago
0.8.2
1 year ago
0.8.1
1 year ago
0.8.0
1 year ago
0.7.2
1 year ago
0.7.1
1 year ago
0.7.0
1 year ago
0.6.4
1 year ago
0.6.3
1 year ago
0.6.2
1 year ago
0.6.1
1 year ago
0.6.0
1 year ago
0.5.0
1 year ago
0.4.0
1 year ago
0.3.3
1 year ago
0.3.2
1 year ago
0.3.1
1 year ago
0.3.0
1 year ago
0.2.4
1 year ago
0.2.3
1 year ago
0.2.2
1 year ago