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
Classname | Description |
---|---|
lm-feed-wrapper__card__body__heading | Styles the main heading/title section of the post body |
lm-feed-wrapper__card__body__content__read-more-tap-icon | Controls the appearance of the read more button and its icon |
lm-feed-wrapper__card__body__attachment | Manages the layout and styling of post attachments section |
lm-feed-wrapper__card__body__content | Styles the main content area of the post body |
lm-feed-wrapper__card__body overflow-word-break | Handles text overflow and word breaking behavior in post content |
attachments | Defines 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