LMFeedDetails

LMFeedDetails renders the detailed view of a post with its complete content, including media, comments, and interactions. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

• LMFeedCreatePost
• LMFeedPost

Props

Property	Type	Description	Optional
postId	string	Unique identifier for the post to display details

CSS Classnames

Classname	Description
lm-post-header	Header section styling for post details
lm-feed-wrapper	Main wrapper for feed content
lm-cursor-pointer	Interactive element hover styling

Example

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

.lm-post-header {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

You can also pass your custom component to replace the default view for LMFeedDetails. You can use the below hooks to customise the component.

Hooks Used

• useLMFeedDetails

Below is an example for customising the view for LMFeedDetails 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 LMFeedDetails
const CustomLMFeedDetails = () => {
  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={{
          CustomFeedDetails: <CustomLMFeedDetails />,
        }}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file