LMFeedPostTopicsWrapper

LMFeedPostTopicsWrapper renders the topics/tags section of posts, displaying associated categories and topics. It manages the display and interaction of topic tags and their related metadata.

CSS Classnames

Classname	Description
lm-feed-wrapper__card__topic-view-wrapper lm-mb-3	Topic view container with bottom margin spacing

Example

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

.lm-feed-wrapper__card__topic-view-wrapper  lm-mb-3 {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising LMFeedTopicsTile

You can also pass your custom component to replace the default view for LMFeedTopicsTile.

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

Reference

For reference, check out this file