Can someone explain best way to use ChatFeed component only?

[Andriy-Kulak]

Hi Peeps! I only want to use the ChatFeed component within my app as pop up from the bottom of the screen. I wrote code that works, but it's difficult to style. (I want for it to pop up on bottom right side instead of taking up the whole screen).

There is no clear example of using <ChatFeed ... /> component by itself (example below of what I tried). I got the ChatFeed to work by itself using <MultiChatWindow ... /> but this just seems bulky. Below is the code.

What is the proper way to use ChatFeed component by itself? Can someone provide examples? It doesn't state any of this in documentation in storybook.

import React from "react";
import {
  MultiChatWindow,
  MultiChatSocket,
  useMultiChatLogic,
  ChatFeed,
} from "react-chat-engine-advanced";

const Chat = () => {
  const {
    REACT_APP_CHAT_ENGINE_PROJECT_ID,
    REACT_APP_USER_SECRET,
    REACT_APP_USER_NAME,
  } = process.env;

  const chatProps = useMultiChatLogic(
    REACT_APP_CHAT_ENGINE_PROJECT_ID,
    REACT_APP_USER_NAME,
    REACT_APP_USER_SECRET
  );

  return (
    <div style={{ width: "100%", height: "100%", backgroundColor: "green" }}>
      {/* 3. *** This works but looks super bulky  and is more difficult to style *** */}
      <MultiChatWindow
        {...chatProps}
        renderChatList={() => <></>}
        renderChatSettings={() => <></>}
      />
      {/* *** Note: I tried ChatFeed by itself but it doesn't work :-() *** */}
      {/* <ChatFeed {...chatProps} /> */}
      {/* 4. SOCKET */}
      <MultiChatSocket {...chatProps} />
    </div>
  );
};

export default Chat;

Below is an example of what happens when I try using just <ChatFeed /> component by itself. :-(

[alamorre]

Give me a few minutes and I’ll get back to you it’s really easy

Sent from my iPhone

On Jul 28, 2022, at 5:03 PM, Andriy Kulak @.***> wrote:

 Hi Peeps! I only want to use the ChatFeed component within my app as pop up from the bottom of the screen. I wrote code that works, but it's difficult to style. (I want for it to pop up on bottom right side instead of taking up the whole screen).

There is no clear example of using <ChatFeed ... /> component by itself (example below of what I tried). I got the ChatFeed to work by itself using <MultiChatWindow ... /> but this just seems bulky. Below is the code.

What is the proper way to use ChatFeed component by itself? Can someone provide examples? It doesn't state any of this in documentation in storybook.

import React from "react"; import { MultiChatWindow, MultiChatSocket, useMultiChatLogic, ChatFeed, } from "react-chat-engine-advanced";

const Chat = () => { const { REACT_APP_CHAT_ENGINE_PROJECT_ID, REACT_APP_USER_SECRET, REACT_APP_USER_NAME, } = process.env;

const chatProps = useMultiChatLogic( REACT_APP_CHAT_ENGINE_PROJECT_ID, REACT_APP_USER_NAME, REACT_APP_USER_SECRET );

return ( <div style={{ width: "100%", height: "100%", backgroundColor: "green" }}> {/* 3. This works but looks super bulky and is more difficult to style /} <MultiChatWindow {...chatProps} renderChatList={() => <></>} renderChatSettings={() => <></>} /> {/ Note: I tried ChatFeed by itself but it doesn't work :-() /} {/ <ChatFeed {...chatProps} /> /} {/ 4. SOCKET */} <MultiChatSocket {...chatProps} />

[alamorre]

What's not working? Seems like your messages are delivering.

To select the right chat and make it functional. Do something like this

import React from 'react';

import {
  SingleChatSocket,
  ChatFeed,
  useSingleChatLogic,
} from 'react-chat-engine-advanced';

import {
  DEVELOPMENT,
  PROJECT_ID,
  CHAT_ID,
  CHAT_ACCESS_KEY,
} from 'wherever...';

const App = () => {
  const username = 'Abel Smith';

  const chatProps = useSingleChatLogic(
    PROJECT_ID,
    CHAT_ID,
    CHAT_ACCESS_KEY
  );

  return (
    <div>
        <SingleChatSocket {...chatProps} />
        <ChatFeed {...chatProps} username={username} />
    <div>
  );
};

export default App;

[Andriy-Kulak]

That works! Thanks for the help. Where is documentation for this? like the useSingleChatLogic param? The component section and storybook shows some available params but it looks nothing like your example above.

What's not working? Seems like your messages are delivering.

To select the right chat and make it functional. Do something like this

import React from 'react';

import {
  SingleChatSocket,
  ChatFeed,
  useSingleChatLogic,
} from 'react-chat-engine-advanced';

import {
  DEVELOPMENT,
  PROJECT_ID,
  CHAT_ID,
  CHAT_ACCESS_KEY,
} from 'wherever...';

const App = () => {
  const username = 'Abel Smith';

  const chatProps = useSingleChatLogic(
    PROJECT_ID,
    CHAT_ID,
    CHAT_ACCESS_KEY
  );

  return (
    <div>
        <SingleChatSocket {...chatProps} />
        <ChatFeed {...chatProps} username={username} />
    <div>
  );
};

export default App;

[alamorre]

In the documentation toggle to react-chat-engine-advanced (top left), and there will be pages on single chat logic, components, sockets … etc

Sent from my iPhone

On Jul 29, 2022, at 8:36 AM, Andriy Kulak @.***> wrote:

 That works! Thanks for the help. Where is documentation for this? like the useSingleChatLogic param? The component section and storybook shows some available params but it looks nothing like your example above.

What's not working? Seems like your messages are delivering.

To select the right chat and make it functional. Do something like this

import React from 'react';

import { SingleChatSocket, ChatFeed, useSingleChatLogic, } from 'react-chat-engine-advanced';

import { DEVELOPMENT, PROJECT_ID, CHAT_ID, CHAT_ACCESS_KEY, } from 'wherever...';

const App = () => { const username = 'Abel Smith';

const chatProps = useSingleChatLogic( PROJECT_ID, CHAT_ID, CHAT_ACCESS_KEY );

return (

); }; export default App; — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.