LMQNAFeedPosts
LMQNAFeedPosts
renders the list of QnA posts in the feed. It handles the display and interaction of QnA-specific post content, including questions, answers, and related metadata. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.
Props
Property | Type | Description | Optional |
---|---|---|---|
post | Post | The post data object containing content, metadata and interactions for the QnA feed item | |
user | User | undefined | The current user's data object containing profile information and permissions |
CSS Classnames
Classname | Description |
---|---|
lm-feed-wrapper__card lm-mb-2 | QnA feed card 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 lm-mb-2 {
font-size: 18px;
color: "red";
}
Advanced Customisation
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