@madlogic/chat-react NPM

@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>',
  // ...
}