# 8base-chat

> Chat component that uses 8base

Latest version **2.2.1** (published 2020-06-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install 8base-chat
pnpm add 8base-chat
yarn add 8base-chat
bun add 8base-chat
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.2.1 |
| Published | 2020-06-04 |
| First published | 2020-06-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 20 |
| Unpacked size | 1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexey Ryabov |
| Maintainers | alacret |
| Keywords | 8base, chat, react |

## Links

- npm: https://www.npmjs.com/package/8base-chat
- npm.io page: https://npm.io/package/8base-chat

## Dependencies (20)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [graphql](https://npm.io/package/graphql.md) ^14.4.2
- [pubsub-js](https://npm.io/package/pubsub-js.md) ^1.7.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [emoji-mart](https://npm.io/package/emoji-mart.md) ^2.11.1
- [apollo-link](https://npm.io/package/apollo-link.md) ^1.2.12
- [graphql-tag](https://npm.io/package/graphql-tag.md) ^2.10.1
- [@8base/boost](https://npm.io/package/@8base/boost.md) ^1.9.1
- [react-apollo](https://npm.io/package/react-apollo.md) ^2.5.8
- [ts-invariant](https://npm.io/package/ts-invariant.md) ^0.4.4
- [apollo-client](https://npm.io/package/apollo-client.md) ^2.6.3
- [apollo-link-http](https://npm.io/package/apollo-link-http.md) ^1.5.15
- [apollo-utilities](https://npm.io/package/apollo-utilities.md) ^1.3.2
- [@8base/file-input](https://npm.io/package/@8base/file-input.md) ^0.37.2
- [apollo-link-error](https://npm.io/package/apollo-link-error.md) ^1.1.11
- [@8base/apollo-links](https://npm.io/package/@8base/apollo-links.md) ^0.37.2
- [apollo-link-context](https://npm.io/package/apollo-link-context.md) ^1.0.18
- [apollo-cache-inmemory](https://npm.io/package/apollo-cache-inmemory.md) ^1.6.2
- [apollo-link-batch-http](https://npm.io/package/apollo-link-batch-http.md) ^1.2.12
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.2.1 (latest) — 2020-06-04

## README

<<<<<<< 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`):

```jsx
// 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:

```css
: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](https://www.npmjs.com/package/abortcontroller-polyfill))

---
_Source: https://npm.io/package/8base-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._