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
Classname | Description |
---|---|
lm-feed-wrapper__card__header__menu-items-container | Container for menu items in post header |
lm-flex-container | Flexbox container for flexible layout |
edited | Indicates edited status of the post |
lm-feed-wrapper__card__header--title | Title section styling in post header |
lm-feed-wrapper__card__header--text | Text content styling in post header |
lm-feed-wrapper__card__header | Main header container for feed cards |
lm-primary-text lm-post-badge | Badge styling for post status indicators |
lm-avatar lm-mr-5 | Avatar image with right margin spacing |
three-dot-menu-options lm-cursor-pointer lm-hover-effect | Three-dot menu with hover interaction |
three-dot-menu-image lm-cursor-pointer lm-mr-4 | Three-dot menu icon with spacing |
three-dot-menu-image lm-cursor-pointer | Three-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