Numbers Prefer Multiplication

    @cobuildlab/8base-chat
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.6 • Public • Published

    <<<<<<< HEAD

    8base Chat

    Usage

    You should have react and react-dom as dependencies.

    Example of usage (you can find code in example/src/pages/chat/index.tsx):

    // You need to import styles
    import '8base-chat/dist/8base-chat.css';
    
    import { withLogout } from '@8base/auth';
    import React, { useCallback, useState } from 'react';
    import { Query } from 'react-apollo';
    
    // After you imported styles you can use Chat
    import Chat from '8base-chat';
    import { API_ENDPOINT, WORKSPACE_ID } from 'shared/constants';
    import { USER_QUERY } from 'shared/graphql';
    
    function ChatPage({ logout, auth }) {
      const [isSidebarVisible, setIsSidebarVisible] = useState(true);
    
      const toggleSidebar = useCallback(() => {
        setIsSidebarVisible(value => !value);
      }, []);
    
      const onLogoutClick = useCallback(() => {
        logout();
      }, [logout]);
    
      return (
        <div>
          <button onClick={onLogoutClick}>Logout</button>
          <button onClick={toggleSidebar}>Toggle sidebar</button>
    
          <Query query={USER_QUERY}>
            {({ loading, data }) => {
              if (loading || !data) {
                return <div>Loading...</div>;
              }
    
              return (
                <Chat
                  currentUser={data.user} // We need it to fetch data for currentUser (channels, etc.)
                  uri={API_ENDPOINT} // Where requests will be sent
                  authToken={auth.authState.token} // Will be used in requests 'authorization' header
                  workspaceId={WORKSPACE_ID} // We need it for subscriptions
                  isSidebarVisible={isSidebarVisible}
                  // You can specify which sections to display
                  sections={{
                    channels: true,
                    contacts: true,
                    dm: true,
                  }}
                />
              );
            }}
          </Query>
        </div>
      );
    }
    
    export default withLogout(ChatPage);

    Styling

    The chat uses CSS Variables for colors. If you want to change colors change the following variables:

    :root {
      --chat-primary-color: #3eb7f9;
      --chat-primary-bg-color: #fff;
      --chat-hover-bg-color: #f4f7f9;
      --chat-primary-text-color: #323c47;
      --chat-secondary-text-color: #939ea7;
      --chat-primary-border-color: #d0d7dd;
      --chat-placeholder-color: var(--chat-secondary-text-color);
      --chat-active-presence-color: #00bb6e;
      --chat-message-bg-color: #4da1ff;
      --chat-message-text-color: #fff;
      --chat-message-link-color: var(--chat-message-text-color);
      --chat-my-message-bg-color: var(--chat-primary-bg-color);
      --chat-my-message-text-color: var(--chat-primary-text-color);
      --chat-my-message-link-color: var(--chat-primary-color);
    }

    Development

    Launch watch mode for the chat package

    npm run dev
    

    Launch the example in order to see how the chat works

    cd example
    npm start
    

    In order to generate graphql types, apollo operations and so on, run the command below:

    npm run graphql-types
    

    Polyfills

    It uses AbortController to cancel requests. If you need support browsers that don't support it you can add a polyfill (e.g. abortcontroller-polyfill)

    Install

    npm i @cobuildlab/8base-chat

    DownloadsWeekly Downloads

    13

    Version

    3.0.6

    License

    MIT

    Unpacked Size

    1.17 MB

    Total Files

    216

    Last publish

    Collaborators

    • alacret
    • nodejose
    • lesha12012
    • galue99