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

• LMFeedUserProviderContext.md
• LMFeedCreatePostContext.md

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