Skip to main content

ChatViewList

Streamlined Chat List Integration: Easily Add a Message List to Your Dapp with Built-in Pagination

This component streamlines the process of displaying a paginated list of messages within your user interface. All you need to do is provide a chat ID, and the component handles the rest, presenting you with a comprehensive view of all messages. Additionally, it conveniently includes chat meta information at the top of the component for a complete chat experience.

Usage

import { useContext } from "react";
import styled from "styled-components";
import { ChatViewList } from "@pushprotocol/uiweb";

const ChatViewListTest = () => {
return (
<ChatViewListCard>
<ChatViewList
chatId="196f58cbe07c7eb5716d939e0a3be1f15b22b2334d5179c601566600016860ac"
limit={10}
/>
</ChatViewListCard>
);
};

export default ChatViewListTest;

const ChatViewListCard = styled.div`
height: 40vh;
background: black;
overflow: auto;
overflow-x: hidden;
`;

Customization parameters

ParamTypeDefaultRemarks
chatIdstring-Chat id for a particular chat
limitnumber-Number of messages fetched in each paginated api call,default value is 10
chatFilterListArray<string>-Array of cid's of messages that needs to be excluded from chatViewList

Note: Parameters in this style are mandatory.

Note: Refer ChatUIProvider for details on its paramters.

Live playground

LIVE PREVIEW