LMQNAFeedCreatePostDialog
LMQNAFeedCreatePostDialog
renders the Q&A post creation interface, providing a form for users to create new questions with rich text formatting and media attachments. It handles question submission and validation.
Props
Property | Type | Description | Optional |
---|---|---|---|
mediaUploadDialog | string | Controls the visibility state of the media upload dialog | ✔️ |
CSS Classnames
Classname | Description |
---|---|
lm-feed-create-post-text-box | Text input container for post creation |
lm-avatar lm-mr-4 | Avatar image with right margin spacing |
lm-feed-create-post-topic-text-area-divider | Divider between topic and text area |
lm-textarea | Text area input styling |
lm-feed-create-post-wrapper__user-meta | User metadata container in post creation |
lm-feed-create-post-wrapper | Main wrapper for post creation dialog |
cancelIcon | Close button icon styling |
lm-feed-create-post-wrapper__dialog-heading | Dialog header text styling |
Example
To customize the component with its classnames, open your base CSS file and override the styles using the classname:
.lm-feed-create-post-text-box {
font-size: 18px;
color: "red";
}
Advanced Customisation
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