Skip to main content

LMFeedDataContextProvider

LMFeedDataContextProvider manages the global state and data flow for the feed module. It provides context for post data, user interactions, and feed settings to all child components. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Advanced Customisation​

Customising LMFeedDetails​

You can also pass your custom component to replace the default view for LMFeedDetails. You can use the below hooks to customise the component.

Hooks Used​

Below is an example for customising the view for LMFeedDetails 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 LMFeedDetails
const CustomLMFeedDetails = () => {
  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={{
          CustomFeedDetails: <CustomLMFeedDetails />,
        }}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  )
}
export default App

Reference​

For reference, check out this file