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