Skip to main content

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

ClassnameDescription
lm-createPost__media__imgBox lm-avatarAvatar container in media section
lm-createPost__media--mediaTextMedia section text styling
lm-createPost__footer__left__media lm-cursor-pointerInteractive media button
lm-create-post-btnPost creation button
lm-createPost__footer__left__media--texted lm-text-capitalizeMedia button text
lm-createPostMain post creation container
lm-createPost__footer__leftFooter left section
lm-createPost__mediaMedia section wrapper
lm-createPost__footer__rightFooter right section
lm-createPost__footerFooter container
lm-createPost__footer__right--btn-primary lm-text-capitalizePrimary action button
lm-createPost__footer__left__media--imgBoxMedia 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