Current collected state Current
Observed since 20 Oct, 21:20 UTC
No superseded metadata states collected. Unchanged observations do not create new revisions.
Back to packageRELEASE DETAILS
2.2.1
npm8base-chat
Chat component that uses 8base
Published4 Jun 2020
Direct dependencies54
Transitive dependenciesNot calculated
README
Current package documentation<<<<<<< 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)
Downloads & popularity
Awaiting observationsNo metric observations yet
Download counts and popularity will appear here as the collector receives them.
Declared dependencies 54
Native requirements54 direct targetsNot calculated transitive count
| Package / target | Requirement | Relationship |
|---|---|---|
@8base/apollo-linksEnvironment{
"local_name": "@8base/apollo-links",
"alias": false,
"peer_metadata": null
} | ^0.37.2 | runtime |
@8base/boostEnvironment{
"local_name": "@8base/boost",
"alias": false,
"peer_metadata": null
} | ^1.9.1 | runtime |
@8base/file-inputEnvironment{
"local_name": "@8base/file-input",
"alias": false,
"peer_metadata": null
} | ^0.37.2 | runtime |
apollo-cache-inmemoryEnvironment{
"local_name": "apollo-cache-inmemory",
"alias": false,
"peer_metadata": null
} | ^1.6.2 | runtime |
apollo-clientEnvironment{
"local_name": "apollo-client",
"alias": false,
"peer_metadata": null
} | ^2.6.3 | runtime |
apollo-linkEnvironment{
"local_name": "apollo-link",
"alias": false,
"peer_metadata": null
} | ^1.2.12 | runtime |
apollo-link-batch-httpEnvironment{
"local_name": "apollo-link-batch-http",
"alias": false,
"peer_metadata": null
} | ^1.2.12 | runtime |
apollo-link-contextEnvironment{
"local_name": "apollo-link-context",
"alias": false,
"peer_metadata": null
} | ^1.0.18 | runtime |
apollo-link-errorEnvironment{
"local_name": "apollo-link-error",
"alias": false,
"peer_metadata": null
} | ^1.1.11 | runtime |
apollo-link-httpEnvironment{
"local_name": "apollo-link-http",
"alias": false,
"peer_metadata": null
} | ^1.5.15 | runtime |
apollo-utilitiesEnvironment{
"local_name": "apollo-utilities",
"alias": false,
"peer_metadata": null
} | ^1.3.2 | runtime |
classnamesEnvironment{
"local_name": "classnames",
"alias": false,
"peer_metadata": null
} | ^2.2.6 | runtime |
emoji-martEnvironment{
"local_name": "emoji-mart",
"alias": false,
"peer_metadata": null
} | ^2.11.1 | runtime |
graphqlEnvironment{
"local_name": "graphql",
"alias": false,
"peer_metadata": null
} | ^14.4.2 | runtime |
graphql-tagEnvironment{
"local_name": "graphql-tag",
"alias": false,
"peer_metadata": null
} | ^2.10.1 | runtime |
hoist-non-react-staticsEnvironment{
"local_name": "hoist-non-react-statics",
"alias": false,
"peer_metadata": null
} | ^3.3.0 | runtime |
lodashEnvironment{
"local_name": "lodash",
"alias": false,
"peer_metadata": null
} | ^4.17.15 | runtime |
pubsub-jsEnvironment{
"local_name": "pubsub-js",
"alias": false,
"peer_metadata": null
} | ^1.7.0 | runtime |
react-apolloEnvironment{
"local_name": "react-apollo",
"alias": false,
"peer_metadata": null
} | ^2.5.8 | runtime |
ts-invariantEnvironment{
"local_name": "ts-invariant",
"alias": false,
"peer_metadata": null
} | ^0.4.4 | runtime |
@graphql-codegen/cliEnvironment{
"local_name": "@graphql-codegen/cli",
"alias": false,
"peer_metadata": null
} | ^1.4.0 | development |
@graphql-codegen/typescriptEnvironment{
"local_name": "@graphql-codegen/typescript",
"alias": false,
"peer_metadata": null
} | ^1.4.0 | development |
@graphql-codegen/typescript-operationsEnvironment{
"local_name": "@graphql-codegen/typescript-operations",
"alias": false,
"peer_metadata": null
} | ^1.4.0 | development |
@graphql-codegen/typescript-react-apolloEnvironment{
"local_name": "@graphql-codegen/typescript-react-apollo",
"alias": false,
"peer_metadata": null
} | ^1.4.0 | development |
@modular-css/rollupEnvironment{
"local_name": "@modular-css/rollup",
"alias": false,
"peer_metadata": null
} | ^24.2.2 | development |
@types/classnamesEnvironment{
"local_name": "@types/classnames",
"alias": false,
"peer_metadata": null
} | ^2.2.9 | development |
@types/emoji-martEnvironment{
"local_name": "@types/emoji-mart",
"alias": false,
"peer_metadata": null
} | ^2.8.4 | development |
@types/hoist-non-react-staticsEnvironment{
"local_name": "@types/hoist-non-react-statics",
"alias": false,
"peer_metadata": null
} | ^3.3.1 | development |
@types/lodashEnvironment{
"local_name": "@types/lodash",
"alias": false,
"peer_metadata": null
} | ^4.14.136 | development |
@types/nodeEnvironment{
"local_name": "@types/node",
"alias": false,
"peer_metadata": null
} | ^12.6.2 | development |
@types/pubsub-jsEnvironment{
"local_name": "@types/pubsub-js",
"alias": false,
"peer_metadata": null
} | ^1.5.18 | development |
@types/reactEnvironment{
"local_name": "@types/react",
"alias": false,
"peer_metadata": null
} | ^16.8.23 | development |
@types/react-domEnvironment{
"local_name": "@types/react-dom",
"alias": false,
"peer_metadata": null
} | ^16.8.4 | development |
autoprefixerEnvironment{
"local_name": "autoprefixer",
"alias": false,
"peer_metadata": null
} | ^9.6.1 | development |
concurrentlyEnvironment{
"local_name": "concurrently",
"alias": false,
"peer_metadata": null
} | ^4.1.1 | development |
cssnanoEnvironment{
"local_name": "cssnano",
"alias": false,
"peer_metadata": null
} | ^4.1.10 | development |
huskyEnvironment{
"local_name": "husky",
"alias": false,
"peer_metadata": null
} | ^3.0.0 | development |
lint-stagedEnvironment{
"local_name": "lint-staged",
"alias": false,
"peer_metadata": null
} | ^9.2.0 | development |
postcss-nestedEnvironment{
"local_name": "postcss-nested",
"alias": false,
"peer_metadata": null
} | ^4.1.2 | development |
prettierEnvironment{
"local_name": "prettier",
"alias": false,
"peer_metadata": null
} | ^1.18.2 | development |
rimrafEnvironment{
"local_name": "rimraf",
"alias": false,
"peer_metadata": null
} | ^2.6.3 | development |
rollupEnvironment{
"local_name": "rollup",
"alias": false,
"peer_metadata": null
} | ^1.19.3 | development |
rollup-plugin-commonjsEnvironment{
"local_name": "rollup-plugin-commonjs",
"alias": false,
"peer_metadata": null
} | ^10.0.2 | development |
rollup-plugin-node-resolveEnvironment{
"local_name": "rollup-plugin-node-resolve",
"alias": false,
"peer_metadata": null
} | ^5.2.0 | development |
rollup-plugin-peer-deps-externalEnvironment{
"local_name": "rollup-plugin-peer-deps-external",
"alias": false,
"peer_metadata": null
} | ^2.2.0 | development |
rollup-plugin-typescriptEnvironment{
"local_name": "rollup-plugin-typescript",
"alias": false,
"peer_metadata": null
} | ^1.0.1 | development |
tslintEnvironment{
"local_name": "tslint",
"alias": false,
"peer_metadata": null
} | ^5.18.0 | development |
tslint-config-prettierEnvironment{
"local_name": "tslint-config-prettier",
"alias": false,
"peer_metadata": null
} | ^1.18.0 | development |
tslint-plugin-prettierEnvironment{
"local_name": "tslint-plugin-prettier",
"alias": false,
"peer_metadata": null
} | ^2.0.1 | development |
tslint-reactEnvironment{
"local_name": "tslint-react",
"alias": false,
"peer_metadata": null
} | ^4.0.0 | development |
typescriptEnvironment{
"local_name": "typescript",
"alias": false,
"peer_metadata": null
} | 3.5.3 | development |
utility-typesEnvironment{
"local_name": "utility-types",
"alias": false,
"peer_metadata": null
} | ^3.7.0 | development |
reactEnvironment{
"local_name": "react",
"alias": false,
"peer_metadata": null
} | ^16.8.0 | peer |
react-domEnvironment{
"local_name": "react-dom",
"alias": false,
"peer_metadata": null
} | ^16.8.0 | peer |
Distribution files
1 collectedDistribution 1
Source fileSource distribution
Checksums from source
{
"integrity": "sha512-qy/3RruuqfCkBt8dC/8I0eYB1vEHb2uNeN9svLkNCaBA7T2GeylmBPh2ee18ybhTBx3byVPPueg5UvwHyhtJUQ==",
"shasum": "02c7a21bdd23a859f1b1272403e849d4d1ca2138",
"tarball": "https://registry.npmjs.org/8base-chat/-/8base-chat-2.2.1.tgz",
"fileCount": 212,
"unpackedSize": 1090089,
"npm-signature": "-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2FIOCRA9TVsSAnZWagAAcDQP/j3O3g37WFF8AAddn+zJ\ndEFpf1iixcX2IVdmJiJ3pL3xzb03h2BDmQH1t1X73j/I2HS+YWxJVRjImwoo\npT3+cwVUHY17pUu8VJ8Ikh5rwUI8m2ohvoFzop+o1ap0FIfsmGZL8PbGjHy6\nsWBZRenJxvEJE5jdtWeaqQeBvkXDtEWlHMabClIbyHLjgDllwhgpxCY+sA01\nKxNqUpkiYJSOx9msJE98p/aa4SfUMiNcf62zRSsF6BFNLmq6nIfb/OalenuW\nDaKwmb6BWTwy/kQciXpYvR3wSg/1woD4mzaTxLSC50Hc242NxlRP3otL1KP4\naeBP64IH1SI4cgf3E/4B3I9jum7y4eWmDMKtguGzdamuJ0jD7q7pJEftrtJ5\nsUxVBKrH/EWEifz+PO8As5OSuXKWEBQMWEypcO9zb3iBg/lvpiUF91o/xRog\nbkQdYvv5L/S3NP8MU37ZJ3DU39GBPiLGYuAFUX1tYIujdxC7qkLSvDE2+ktx\nNcGPUSqEklU8HWLGucwcPDBYY1gUaOlDZ8J3EWZDsZwvPunZ85O+gIXFgU44\nITX3UVIjSSnl9pEMx2k5GbXgKPQAz7Cv4tmY6aF22DQO0M6LY+u1+/ayesq4\njrIW7Ph9vbwD5wnoYZ3LxNYx2la75rj4WvFtQJ70AB8k3RKiorVDpobLUJ5g\nd1l8\r\n=1c/+\r\n-----END PGP SIGNATURE-----\r\n",
"signatures": [
{
"keyid": "SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA",
"sig": "MEUCIAHDjnweMdK9cD1kOIJs3Q7dBfxhGr8J3ux/oqNa6P5OAiEA90Ryk91M37NHRHz5SpgkmjPP3yDHj6KQbzTuUM8T+4s="
}
]
}Metadata history
Meaningful changesRecord identity
package_version:9e8e2bd49af03ae6c747dd35e556ca788377271fa76306dff1ff8c12a045010e