LMQNAFeedUniversalFeed

LMQNAFeedUniversalFeed renders a unified feed interface that combines Q&A posts with regular social feed content. It manages the display and interaction of both question-answer and social post types in a single stream. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

• LMQNAFeedCreatePost
• LMFeedAllMembers
• LMQNAFeedPosts

Props

Property	Type	Description	Optional
PostView	React.FC	Component to render individual post content	✔️
Shimmer	React.FC	Loading state component for feed items	✔️
FooterView	React.FC	Component to render footer section of feed items	✔️
HeaderView	React.FC	Component to render header section of feed items	✔️
likeActionCall	() => void	Callback function triggered when like action is performed	✔️

CSS Classnames

Classname	Description
lm-member	Member information container
lm-feed-wrapper lm-d-flex	Flex container for feed content
lm-flex-grow	Element that grows to fill available space
lm-mb-4 lm-mt-4	Container with top and bottom margin spacing

Example

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

.lm-member {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

Customising LMQNAFeedPostsView

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

Below is an example for customising the view for LMQNAFeedPosts 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 LMQNAFeedPosts
const CustomLMQNAFeedPostsView = () => {
  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={{
          CustomPostView: <CustomLMQNAFeedPostsView />,
        }}
      >
        <LMQNAFeedUniversalFeed />
      </LMQNAFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file