Issues formatting Conversations and Avatars about chat-ui-kit-react HOT 3 CLOSED

@Johnne25 It the same as in the previous question in #12.

First of all src property of <Avatar /> component accepts only image path, so you can't provide Avatar from react-avatar package by this property.

So in short, please try this:

in file MyAvatar.js define your custom avatar

import Avatar from "react-avatar"
export const MyAvatar () => <Avatar />

in main file

import {Avatar} from "@chatscope/chat-ui-kit-react";
import MyAvatar from "./MyAvatar";
<MyAvatar as={Avatar} src={<Avatar name='John'/>} />

or this:

import ReactAvatar from "react-avatar";

<ReactAvatar as="Avatar" size="40px" name="Lilly" />
// You can also add chatscope avatar class to react-avatar
<ReactAvatar as="Avatar" size="40px" className="cs-avatar" name="Lilly" />

Of course, it can require some CSS tweaking.

Please note: "as" property can be passed also as a string with component name, so you can combine it in many ways

from chat-ui-kit-react.

Related to: #8

from chat-ui-kit-react.

Thanks.

from chat-ui-kit-react.