Skip to main content

LMFeedPostHeader

LMFeedPostHeader renders the header section of a feed post, displaying the author's information, post creation time, and post options menu. It handles the display of user avatars, names, and post metadata.

CSS Classnames

ClassnameDescription
lm-feed-wrapper__card__header__menu-items-containerContainer for menu items in post header
lm-flex-containerFlexbox container for flexible layout
editedIndicates edited status of the post
lm-feed-wrapper__card__header--titleTitle section styling in post header
lm-feed-wrapper__card__header--textText content styling in post header
lm-feed-wrapper__card__headerMain header container for feed cards
lm-primary-text lm-post-badgeBadge styling for post status indicators
lm-avatar lm-mr-5Avatar image with right margin spacing
three-dot-menu-options lm-cursor-pointer lm-hover-effectThree-dot menu with hover interaction
three-dot-menu-image lm-cursor-pointer lm-mr-4Three-dot menu icon with spacing
three-dot-menu-image lm-cursor-pointerThree-dot menu icon with hover effect

Example

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

.lm-feed-wrapper\_\_card\_\_header\_\_menu-items-container {
font-size: 18px;
color: "red";
}

Advanced Customisation

Customising Post Pin Icon

You can also pass your custom icon to replace the default icon for PostPinIcon.

Below is an example for customising the icon for PostPinIcon and rendering your own icon. 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 Icon for PostPinIcon
const LMFeedCustomIconsCallback = {
postPinCustomIcon: () => {
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}
LMFeedCustomIcons={LMFeedCustomIconsCallback}
>
<LMFeedUniversalFeed />
</LMSocialFeed>
</div>
)
}
export default App

Reference

For reference, check out this file