LMFeedPostFooter

LMFeedPostFooter renders the footer section of a feed post, containing like, comment, and share actions. It manages the interaction states and displays the count of likes and comments for each post.

CSS Classnames

Classname	Description
lm-d-flex lm-align-items-center lm-flex-gap lm-cursor-pointer	Flex container for interactive elements with spacing
lm-d-flex lm-flex-grow lm-position-relative lm-align-items-center lm-mb-5 lm-feed-reply lm-pl-4 lm-pr-4 lm-pt-4 lm-pb-4	Reply section container with padding and spacing
lmLikedMemberWrapper	Container for liked members list
lm-footer-reply-divider	Divider between footer and reply sections
lm-feed-wrapper__card__footer_likes-count	Like count display styling
lm-cursor-pointer	Interactive element hover styling
lm-social-action-bar__actions	Container for social action buttons
comments lm-feed-wrapper__card__footer_comments-count	Comment count display styling
lm-feed-wrapper__card__footer	Main footer container for feed cards
lm-social-action-bar	Container for social interaction buttons

Example

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

.lm-d-flex lm-align-items-center lm-flex-gap lm-cursor-pointer {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising LMFeedReplyTextAreaView

You can also pass your custom component to replace the default view for LMFeedReplyTextArea. You can use the below hooks and contexts to customise the component.

Hooks Used

• useTagging.md
• useLMPostReply.md

Contexts Used

• ReplyContext.md
• LMFeedUserProviderContext.md
• FeedPostContext.md

Below is an example for customising the view for LMFeedReplyTextArea 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 LMFeedReplyTextArea
const CustomLMFeedReplyTextAreaView = () => {
  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={{
          CustomPostReplyTextArea: <CustomLMFeedReplyTextAreaView />,
        }}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file