Feed

The Feed component is a fully featured social feed that allows users to create new posts, read existing posts and replies, and leave their own replies. Posts and replies may include file attachments, and the entire Feed can be sorted with filters.

New posts are created using the RichTextEditor component, and existing posts are displayed using the RichTextViewer component. Each component is enhanced with special styling and interaction functionality specific to the Feed component.

For more information on how to use the features and props for this component, check out the developer documentation.

To learn more about configuration, visit Pega Community.

The Feed component is mainly composed of three regions: a header, new post creation, and a list of existing posts. For new post creation, you should pass your implementation of the FeedNewPost component to Feed's newPostRegion prop. New posts are powered by the markdown mode of the RichTextEditor component.

The FeedNewPost component requires an id and interactionInfo that will control the rendering of the RichTextEditor placeholder and the text of the submission Button. This component also requires an onPost handler function. When a user submits a post, the onPost function is triggered with information on the post's id, value, username of the author, as well as attachments and recipients, if any. The onPost function is also provided a clear function that can be used to clear the content of the new post.

Private posts

New posts are set to public visibility by default, but if you would like to provide users the option of authoring private posts, you can pass an array of recipients. Doing so will render a Menu above the new post input where users can select making the new post private or public, and if they choose private, they will have an opportunity to select individuals from the list of recipients.

File attachments

New posts may also accepts file attachments if an onFilesAdded callback function is provided. An attachment Button will render towards the end of the input region that will open the user's file explorer when clicked. Multiple files may be attached simultaneously, and each file that is passed to the attachments prop will render as a FileUploadItem beneath the input region. Attachments can be removed from the new post before submission.

The FeedNewPost component will not allow for submission unless there are either attachments or textual content present.

Any posts that are present in the Feed should be passed to the posts prop as an array of FeedPost components. The FeedPost component takes a large set of props that handle everything from what content to display in the post and how, to interactions on user information, replies, editing, and likes.

Each post must have a unique id and content. The content of a post will be rendered by the RichTextViewer component in markdown mode. For best results, we recommend passing the value received from a new post's onPost function into the content of the corresponding FeedPost component without altering the value. This will help to ensure that special behaviors of FeedPosts are preserved, such as mentions and tags.

The FeedPost component can manage attachments and recipients in a similar manner to the FeedNewPost component. FeedPosts also support props for the fullname and username of the post author, as well as the timeElapsed since the post was last updated. A userStatus prop will render a Status badge alongside the user's Avatar, and a postContext can be provided to display more details for the context in which the post was made.

Attachments

The FeedPost component accepts the same array of attachments as the FeedNewPost component. Attachments will render below the post content. Attachments that have a detected mime type of image will render as large previews that trigger an onPreview callback function when clicked. All other file types will render as the FileUploadItem component.

Private posts

A FeedPost has a default postType of public. If a post was created as a private post, pass private to the postType prop. This will change the Icon shown below the author's fullname on the post. When a user hovers over the Icon on a private post, a Tooltip will render with a list of recipients, if provided. If the recipientsCount exceeds 10, a user may click on the Icon to view all recipients in a Modal. From here, lazy loading allows for additional recipients to be shown. An onLoadMoreRecipients callback function is triggered when a user reaches the bottom of the list of recipients.

Likes

Every FeedPost will offer the ability to like the post and view the names of other users that have liked the post. This behavior is enabled by default, but can be disabled by passing false to the interactionsEnabled prop. A likelabel is required for displaying the like Button text. If the active user clicks the like Button, an onLikeClick callback function will be triggered with that user's information. The liked prop on the FeedPost component should be set to true.

For existing likes on a post, pass the relevant user information for each like as a list to the likes prop. When a user hovers over the like Count badge on a post, a Tooltip will render with a list of likes. If the likeCount exceeds 10, a user may click on the like Count badge to view all likes in a Modal. From here, lazy loading allows for additional likes to be shown. An onLoadMoreLikes callback function is triggered when a user reaches the bottom of the list of likes.

Replies

The interactionsEnabled prop that renders the like Button below a post is also responsible for rendering the comment Button. Similar to likes, the comment Button expects a commentLabel and replyCount. If a user clicks the comment Button, a reply input will render below the post, or below any other existing replies. Replies can accept attachments just like new posts, and they are also written with markdown syntax enabled.

Existing replies can be shown if provided via the replies prop. If either an onShowMoreReplies or onShowLessReplies callback function is provided to the FeedPost component, the number of replies below a post can be visibly toggled. A count of how many replies are shown vs the total replies will also render inline with the like and comment interactions. The total number of replies can be provided via the replyCount prop. A loading state is also available when the Show more or Show less Buttons are triggered if the repliesLoading prop is true.

Editing a post

If the active username that is set on the Feed component matches the author username of a FeedPost, and an onEditSubmit callback function is provided, the Edit action will automatically be appended to any other menuItems that are used to render a Menu alongside the post content. The user may then modify the content of the FeedPost and re-submit. Attachments are not able to be modified. If a post has been edited, pass true to the edited prop.

The top-level Feed component leverages the full capabilities of both the FeedNewPost and FeedPost components. In addition, it manages the active user information such as their fullname, username, and avatarSrc image. This information is used to render the user's Avatar and display name when they create a new post or a new reply. It is also used to determine if a user has permission to edit a post they had previously authored.

The Feed component also offers options for a heading including a title for the Feed, and a set of filters that are powered by the Switch component. Pass an onFilterChange function to handle user selections within the filters. You may also lazy load the entire feed by passing an onLoadMore callback function. This will trigger when a user scrolls to the end of the feed, enabling your application to fetch more posts on command.

Mentions and tags

As mentioned in the RichTextEditor and RichTextViewer documentation, the Feed component leverages special search and styling functionality that enables users the create mentions or tags within their post or reply content.

To trigger a tag search, a user must begin by typing #. To trigger a mention search, a user must begin by typing @. Either character will trigger the onDecoratorSearch callback function with the search trigger and the search query. For mention searches, you may also provide a set of mention categories via the searchTypes prop. This will offer more options for a user to choose from while searching. The searchResults will be populated in a Menu and should thus be formatted as Menu props.

When mentions or tags are selected from a search within a FeedNewPost, they will have special styling applied to them. These elements will appear in an identical fashion after the post has been submitted. When mentions or tags appear in a FeedPost, they may be interacted with by passing the onMentionClick and onTagClick callback functions.

NameTypeDefaultDescription
userInfo*
{
  avatarSrc: string;
  fullname: string;
  meta: string[];
  username: string;
}
Information related to the user of the Feed.
filtersFilter[]A set of filters to apply to the Feed.
interactionRenderersInteractionRenderers[]A list of configuration objects used to render custom components within Feed posts and replies based off of a given regex pattern.
markdownMapMDMapA mapping for various element types to render custom components for within posts.
newPostRegionReactNodeA region to hold the new post component
onDecoratorSearch
(e: {
  mentionType: string;
  search: string;
  type: 'mention' | 'tag';
}) => void
A callback that runs when a decorator search has been run inside of the feed.
onFilterChange(filterId: string, on: boolean) => voidA callback that runs when the filter is toggled.
onLoadMore() => voidA callback that is triggered when the bottom of the Feed is scrolled into view so that additional posts may be displayed.
onMentionClick
(e: {
  id: string;
  text: string;
  type: string;
}) => Element | undefined
A callback that is triggered when a mention is clicked. The callback sends back the id, text, and type of the mention. The callback should return a function component.
onTagClick(tag: string) => voidA callback that is triggered when a hashtag is clicked. The callback sends back the test of the tag.
postsReactNode[]A list of FeedPost components
searchResultsMenuItemProps[]Results that will be shown in a Popover for a mention or tag search.
searchTypesstring[]A set of search types that can be used to determine which data set to conduct a mention search on.
titlestringTitle for the feed.