Skip to main content

Link Preview

Overview

LinkPreview is a React component designed to display a preview of a link. It provides users with a visually engaging representation of the link's content, including elements like the title, description, and a thumbnail image. This component enhances user experience by making links more informative and clickable within chat or feed interfaces.

GitHub File:

LMFeedMediaPreviewScreen

Customisations

The LinkPreview customisations can be done using chatBubbleStyles as shown in the Message component.

Usage Example

  • In your app, create a CustomChatroomScreen file, wrap it with the ChatRoom context provider.
  • Now, you can pass your own custom link preview message component as prop to the ChatRoom context provider
import {
ChatRoom,
ChatroomHeader,
MessageList,
MessageInput,
useChatroomContext,
useMessageListContext,

ChatroomTopic,
STYLES
} from "@likeminds.community/chat-rn-core";
import {InputBoxContextProvider} from '@likeminds.community/chat-rn-core/ChatSX/context/InputBoxContext';
import {ChatroomContextValues} from '@likeminds.community/chat-rn-core/ChatSX/context/ChatroomContext';
import MessageInputBox from "@likeminds.community/chat-rn-core/ChatSX/components/InputBox";

export function CustomChatroomScreen() {

const {
chatroomID,
chatroomWithUser,
currentChatroomTopic,
chatroomType,
replyChatID,
isEditable,
chatroomName,
isSecret,
refInput,
chatroomDBDetails,
chatRequestState,
setIsEditable,
handleFileUpload,
joinSecretChatroom,
onTapToUndo,
}: ChatroomContextValues = useChatroomContext();

return (
<ChatRoom
customLinkPreview={<"CUSTOM_LINKPREVIEW_COMPONENT">}
>

{/* ChatroomHeader */}
<ChatroomHeader />

{/* ChatroomTopic */}
<ChatroomTopic />

{/* MessageList */}
<MessageList />

{/* Input Box Flow */}
<InputBoxContextProvider
chatroomName={chatroomName}
chatroomWithUser={chatroomWithUser}
replyChatID={replyChatID}
chatroomID={chatroomID}
isUploadScreen={false}
myRef={refInput}
handleFileUpload={handleFileUpload}
isEditable={isEditable}
setIsEditable={(value: boolean) => {
setIsEditable(value);
}}
isSecret={isSecret}
chatroomType={chatroomType}
currentChatroomTopic={currentChatroomTopic}
isPrivateMember={chatroomDBDetails.isPrivateMember}
chatRequestState={chatRequestState}>
<MessageInput>
<MessageInputBox />
</MessageInput>
</InputBoxContextProvider>
</ChatRoom>
);
}