LMFeedCreatePostDialog

LMFeedCreatePostDialog renders the post creation dialog interface, providing a form for users to compose new posts with rich text, media attachments, and polls. It handles post submission and validation.

Props

Property	Type	Description	Optional
mediaUploadDialog	string	Controls the visibility state of the media upload dialog	✔️

CSS Classnames

Classname	Description
anonymous-post-checkbox	Checkbox for anonymous post option
lm-avatar lm-mr-4	Avatar image with right margin spacing
anonymous-post-text	Text label for anonymous post option
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-anonymous-post	Container for anonymous post options
lm-feed-create-post-wrapper__dialog-heading	Dialog header text styling

Example

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

.anonymous-post-checkbox {
  font-size: 18px;
  color: "red";
}

Advanced Customisation

You can also pass your custom component to replace the default view for LMFeedCreatePostDialog. 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 LMFeedCreatePostDialog and rendering your own view. It is fairly a 2 simple step process

• Step 1: Create your own custom view.

import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedUniversalFeed,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMFeedCreatePostDialog
const CustomLMFeedCreatePostDialog = () => {
  return (
    // Your Custom Code
  );
};

• Step 2: Pass your Custom View to LMSocialFeed

import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedUniversalFeed,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
  const lmFeedClient = initiateFeedClient()

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMSocialFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        CustomComponents={{
          CustomCreatePostDialog: <CustomLMFeedCreatePostDialog />,
        }}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  )
}
export default App

Reference

For reference, check out this file