LMQNAFeedCreatePost
LMQNAFeedCreatePost
renders the QnA post creation interface. It provides a specialized form for creating QnA posts with question-specific fields and validation.
CSS Classnames
Classname | Description |
---|---|
lm-createPost__media__imgBox lm-avatar | Avatar container in media section |
lm-createPost__media--mediaText | Media section text styling |
lm-createPost__footer__left__media lm-cursor-pointer | Interactive media button |
lm-create-post-btn | Post creation button |
lm-createPost__footer__left__media--texted lm-text-capitalize | Media button text |
lm-createPost | Main post creation container |
lm-createPost__footer__left | Footer left section |
lm-createPost__media | Media section wrapper |
lm-createPost__footer__right | Footer right section |
lm-createPost__footer | Footer container |
lm-createPost__footer__right--btn-primary lm-text-capitalize | Primary action button |
lm-createPost__footer__left__media--imgBox | Media image container |
Example
To customize the component with its classnames, open your base CSS file and override the styles using the classname:
.lm-createPost\_\_media\_\_imgBox lm-avatar {
font-size: 18px;
color: "red";
}
Advanced Customisation
Customising LMQNAFeedCreatePostDialog
You can also pass your custom component to replace the default view for LMQNAFeedCreatePostDialog. You can use the below contexts to customise the component.
Contexts Used
Below is an example for customising the view for LMQNAFeedCreatePostDialog 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 LMQNAFeedCreatePostDialog
const CustomLMQNAFeedCreatePostDialogView = () => {
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={{
CustomCreatePostDialog: <CustomLMQNAFeedCreatePostDialogView />,
}}
>
<LMQNAFeedUniversalFeed />
</LMQNAFeed>
</div>
)
}
export default App
Reference
For reference, check out this file