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.

Component	Type	Description
`CustomPostViewHeader`	ReactNode	This custom view will replace the post's default header
`CustomPostViewFooter`	ReactNode	This custom view will replace the post's default Footer
`CustomPostViewBody`	ReactNode	This custom view will replace the post's default Body
`CustomPostView`	ReactNode	This custom view will replace the post's default View. You have to handle the post's header, footer and body component yourself.
`CustomWidgetPostView`	ReactNode	This custom view will replace the post's default view when only additional metadata is sent in the post.

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.

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

How to render custom component?

Creating a Custom Component​

Creating a Custom Component