Skip to main content

LMQNAFeedDetails

LMQNAFeedDetails renders the detailed view of a Q&A post, showing the question, answers, and related metadata. It manages the display of answer threads, voting, and user interactions. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Props

PropertyTypeDescriptionOptional
postIdstringUnique identifier for the QnA post to display details

CSS Classnames

ClassnameDescription
lm-post-headerHeader section styling for QnA post details
lm-feed-wrapperMain wrapper for QnA feed content
lm-cursor-pointerInteractive element hover styling

Example

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

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

Advanced Customisation

Customising LMQNAFeedPosts

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