<<<<<<< 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 stylesimport '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 Chatimport Chat from '8base-chat';import API_ENDPOINT WORKSPACE_ID from 'shared/constants';import USER_QUERY from 'shared/graphql'; { const isSidebarVisible setIsSidebarVisible = ; const toggleSidebar = ; const onLogoutClick = ; return <div> <button =>Logout</button> <button =>Toggle sidebar</button> <Query => loading data if loading || !data return <div>Loading...</div>; return <Chat = // (, .) = // = // 'authorization' = // = // = /> ; </Query> </div> ;} ChatPage;
Styling
The chat uses CSS Variables for colors. If you want to change colors change the following variables:
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)