LMFeedCreatePost

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

CSS Classnames

Classname	Description
lm-createPost__media__imgBox lm-avatar	Image box styling for post media avatar
lm-createPost__media--mediaText	Text styling for media section in post creation
lm-createPost__footer__left__media lm-cursor-pointer	Media button styling in post footer (left)
lm-create-post-btn	Button styling for creating a post
lm-createPost__footer__left__media--texted lm-text-capitalize	Text styling for left media section in footer
lm-createPost	Main wrapper for post creation component
lm-createPost__footer__left	Left section of the post footer
lm-createPost__media	Container for post media elements
lm-createPost__footer__right	Right section of the post footer
lm-createPost__footer	Main footer container for post creation
lm-createPost__footer__right--btn-primary lm-text-capitalize	Primary button styling in right footer
lm-createPost__footer__left__media--imgBox	Image box styling for left media section in footer

Example

To customise the component with their 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 LMFeedCreatePostDialog

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