Skip to main content

LMFeedPostBody

LMFeedPostBody renders the main content section of a feed post, handling the display of text content, media attachments, and embedded links. It supports various content types including text, images, videos, and link previews.

CSS Classnames​

ClassnameDescription
lm-feed-wrapper__card__body__headingStyles the main heading/title section of the post body
lm-feed-wrapper__card__body__content__read-more-tap-iconControls the appearance of the read more button and its icon
lm-feed-wrapper__card__body__attachmentManages the layout and styling of post attachments section
lm-feed-wrapper__card__body__contentStyles the main content area of the post body
lm-feed-wrapper__card__body overflow-word-breakHandles text overflow and word breaking behavior in post content
attachmentsDefines the styling for attachment containers and their layout

Example​

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

.lm-feed-wrapper\_\_card\_\_body\_\_heading {
font-size: 18px;
color: "red";
}

Advanced Customisation​

Customising LMFeedAttachmentsView​

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

Contexts Used​

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

Reference​

For reference, check out this file