Skip to main content

How to render custom component?

The LikeMinds Feed SDK provides developers with the ability to render custom user-provided components. It will automatically render your component in place of default components.

Creating a Custom Component​

Custom Component is just another React Component, which the SDK will render in place of default component. The SDK wraps all the data related to that post inside FeedPostContext. You can use React's Context API to access it.

import { FeedPostContext } from "@likeminds.community/likeminds-feed-reactjs";

function DemoCustomComponent() {
  const { post } = useContext(FeedPostContext);
  //   log the post
  console.log(post);
  return <div>Sample Custom Component</div>;
}
tip

Apart from post, there are many other properties which you can destructure. Log them to find out more.

Now once you have created your custom component, you need to pass it to the CustomComponents prop. This prop provides an entry point for the developers to set up several custom components in place of default provided components.

ComponentTypeDescription
CustomPostViewHeaderReactNodeThis custom view will replace the post's default header
CustomPostViewFooterReactNodeThis custom view will replace the post's default footer
CustomPostViewTopicsWrapperReactNodeThis custom view will wrap around the post's topics
CustomPostViewBodyReactNodeThis custom view will replace the post's default body
CustomTopicDropDownReactNodeThis custom view will replace the post's default topic dropdown
CustomReplyReactNodeThis custom view will replace the post's default reply
CustomPostViewReactNodeThis custom view will replace the post's default view. You have to handle the post's header, footer, and body component yourself.

To see the full list of all the components that can be replaced, see here.

For this tutorial we will use CustomPostView key of CustomComponents prop.

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