LMFeedActivityHeader

LMFeedActivityHeader renders the header section of the activity feed, displaying navigation controls, filters, and sorting options. It manages the feed's view state and user preferences for content organization.

Props

Property	Type	Description	Optional
`propReport`	`GroupReport \| undefined`	Contains the report data for a group post or comment	Yes

CSS Classnames

Classname	Description
lm-feed-wrapper__card__header__menu-items-container	Container for menu items in the activity header
moderation-post-header-title-end post-header-title-end-custom-style	Styles the end section of the post header title
lm-flex-container	Flexbox container for flexible layout arrangement
closed-header-wrapper	Wrapper for closed/archived post headers
edited	Indicates edited status of the post
lm-feed-wrapper__card__header	Main header container for feed cards
lm-feed-wrapper__card__header--title	Styles the title section of the header
lm-feed-wrapper__card__header--text	Text content styling in the header
lm-primary-text lm-post-badge	Badge styling for post status indicators
lm-avatar lm-mr-5	Avatar image with right margin spacing
moderation-post-header-names__capitalize post-header-user-custom-style	User name display in moderation view
moderation-post-header-names	Container for user names in moderation
moderation-post-header-alert activity-header-custom-style	Alert styling in activity header
question-mark-icon closed-header-wrapper-question-icon	Question mark icon for closed posts
three-dot-menu-image lm-cursor-pointer lm-mr-4	Three-dot menu icon with hover effect
moderation-post-header-names post-header-user-custom-style	User name styling in moderation view
moderation-closed-header	Header styling for closed moderation items
approval-pending-icon	Icon indicating pending approval status

Example

To customize the component with these 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 Moderation Header Leading Icon

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

Below is an example for customising the icon for ModerationHeaderLeadingIcon 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 ModerationHeaderLeadingIcon
const LMFeedCustomIconsCallback = {
  moderationHeaderLeadingIcon: () => {
    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

LMFeedActivityHeader

Props​

CSS Classnames​

Example​

Advanced Customisation​

Customising Moderation Header Leading Icon​

Reference​