Skip to main content

LMFeedUniversalFeed

LMFeedUniversalFeed renders a unified feed interface that combines various post types and content formats. It manages the display and interaction of different content types in a single, cohesive stream. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Props

PropertyTypeDescriptionOptional
followedTopicsstring[]Array of topic IDs that the user is following✔️

CSS Classnames

ClassnameDescription
lm-memberMember information container
lm-feed-wrapper lm-d-flexFlex container for feed content
lm-flex-growFlexible growth container for layout
lm-mb-4 lm-mt-4Container 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 LMFeedPostView

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

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

Reference

For reference, check out this file