LMQNAFeedPostFooter

LMQNAFeedPostFooter renders the footer section of Q&A posts, containing voting, answer count, and interaction controls. It manages the display of post metrics and user interactions specific to Q&A format.

CSS Classnames

Classname	Description
lm-feed-wrapper__card__footer	Main footer container for QnA feed cards
lm-feed-wrapper__card__footer__attachment	Attachment section styling in footer
lm-feed-wrapper__card__footer__items	Container for footer action items
lm-feed-wrapper__card__footer__items--bar	Action bar styling in footer
lm-feed-wrapper__card__footer__items--tap	Interactive tap area styling
lm-feed-wrapper__card__footer__items--tap-icon	Icon styling for tap actions
lm-feed-wrapper__card__footer__items--tap-img	Image styling for tap actions
lm-feed-wrapper__card__footer__items--tap-text	Text styling for tap actions
lm-feed-wrapper__card__footer__topics	Topic tags container in footer

Example

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

.lm-feed-wrapper__card__footer {
  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 {
   LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedReplyTextArea
const CustomLMFeedReplyTextAreaView = () => {
  return (
    // Your Custom Code
  );
};

• Step 2: Pass your Custom View to LMQNAFeed

import {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
  const lmFeedClient = initiateFeedClient()

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMQNAFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        CustomComponents={{
          CustomPostReplyTextArea: <CustomLMFeedReplyTextAreaView />,
        }}
      >
        <LMQNAFeedUniversalFeed />
      </LMQNAFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file