LMFeedPosts

LMFeedPosts renders a list of feed posts with their associated content and interactions. It manages post loading, pagination, and real-time updates for the feed stream. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

• LMFeedPostHeader
• LMFeedActivityHeader
• LMFeedPostTopicsWrapper
• LMFeedPostBody
• LMFeedPostFooter
• LMFeedActionFooter

Props

Property	Type	Description	Optional
propReport	GroupReport	Contains report details for a group or post	✔️
post	Post	The post data to be displayed in the feed
user	User | undefined	Current user's information and permissions
isModerationScreen	boolean	Flag to determine if the component is being rendered in moderation view	✔️

CSS Classnames

Classname	Description
lm-feed-wrapper__card lm-mb-2	Feed card container with bottom margin spacing

Example

To customize the component with its classnames, open your base CSS file and override the styles using the classname:

.lm-feed-wrapper__card lm-mb-2 {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

You can also pass your custom component to replace the default view for LMFeedPost.

Below is an example for customising the view for LMFeedPost and rendering your own view. It is fairly a 2 simple step process

• Step 1: Create your own custom view.

import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedUniversalFeed,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedPost
const CustomLMFeedPostView = () => {
  return (
    // Your Custom Code
  );
};

• Step 2: Pass your Custom View to LMSocialFeed

import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedUniversalFeed,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
  const lmFeedClient = initiateFeedClient()

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMSocialFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        CustomComponents={{
          CustomPostView: <CustomLMFeedPostView />,
        }}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file