LMFeedActionFooter

LMFeedActionFooter renders the action buttons and interactive elements in the footer section of feed posts and comments, including like, report, and moderation controls.

Props

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

CSS Classnames

Classname	Description
liked-comment	Indicates a liked comment state
like lm-d-flex reported-comment-footer-bar	Like button container in reported comments
pipe	Divider element between footer items
reported-comment-heading	Heading text for reported comments
moderation-post-footer-wrapper moderation-post-footer-wrapper-custom-style	Footer container for moderation posts
lm-moderation-header__button lm-text-capitalize selected-button approve-button-custom-style	Approve button styling in moderation
lm-reported-comment-container	Container for reported comment content
edit-permission-web-view	Web view layout for permission editing
reported-comment-body	Main content area of reported comments
like	Like button styling
lm-moderation-header__button lm-text-capitalize	Base styling for moderation buttons
reported-comment-wrapper	Wrapper for reported comment sections
reply-badge	Badge indicating reply status
lm-comment-avatar	Avatar styling in comments
lm-moderation-header__button lm-text-capitalize reject-button-custom-style	Reject button styling in moderation
moderation-footer-button-wrapper	Container for moderation action buttons
lm-d-flex lm-justify-content-space-between lm-align-items-center lm-mb-5 reported-comment-footer-bar	Footer bar layout for reported comments
lm-moderation-header__button lm-text-capitalize selected-button	Selected state for moderation buttons
lm-moderation-header__button moderation-edit-member-permission-button edit-member-permission-custom-style	Member permission edit button styling
lm-reported-comment-details	Container for reported comment details
edit-permission-mobile-view	Mobile view layout for permission editing
moderation-post-closed-by	Indicates who closed the post
moderation-post-closed-footer	Footer styling for closed posts
reported-comment-subheading	Subheading text in reported comments
lm-feed-post-like-container reported-comment-heart-icon	Like icon container in reported comments
capitalize	Text capitalization styling
moderation-post-footer-wrapper moderation-post-footer-wrapper-reported moderation-post-footer-wrapper-custom-style	Footer styling for reported posts in moderation

Example

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

.liked-comment {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising Replies Likes Liked Icon

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

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

LMFeedActionFooter

Props​

CSS Classnames​

Example​

Advanced Customisation​

Customising Replies Likes Liked Icon​

Reference​