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
Property | Type | Description | Optional |
---|---|---|---|
followedTopics | string[] | Array of topic IDs that the user is following | ✔️ |
CSS Classnames
Classname | Description |
---|---|
lm-member | Member information container |
lm-feed-wrapper lm-d-flex | Flex container for feed content |
lm-flex-grow | Flexible growth container for layout |
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 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