Example Implementation to render post type in Post UI

In this guide, we will demonstrate how to render a custom Post view for the Posts in LikeMinds Feed. We will add custom post types as a replacement to TopicsView in the PostView and then pass this custom post view to LMSocialFeed component as a custom component.

Step 1 - Create a new Custom Post Component

We will first create a new CustomPostView component. Since we are to just add the post types in this view, we can import all the other components from the SDK itself. Also, we will create a list of custom post types and render it below the header component.

import {
  LMFeedPostHeader,
  LMFeedPostBody,
  LMFeedPostFooter,
  LMFeedPostTopicsWrapper,
} from "@likeminds.community/likeminds-feed-reactjs";

const CustomPostView = () => {

  //post types
  const customPostTypes = [
    {
      title: "question",
      id: 1,
    },
    {
      title: "tip",
      id: 2,
    },
  ];
  
  return (
    <div>
      <LMFeedPostHeader />

      {customPostTypes.map((type) => {
        return (
          <span
            style={
              {
                // Add your desired styles for the view
              }
            }
            key={type.id}
          >
            {type.title}
          </span>
        );
      })}

      <LMFeedPostTopicsWrapper />

      <LMFeedPostBody />

      <LMFeedPostFooter />
    </div>
  );
};

Step 2: Pass the CustomPostView to LMSocialFeed

<LMSocialFeed
  //   Other props
  CustomComponents={{
    CustomPostView: <CustomPostView />,
  }}
></LMSocialFeed>

info

To get the list of all the required props, check out this guide.