Skip to main content

LMQNAFeedDataContextProvider

LMQNAFeedDataContextProvider manages the global state and data flow for the Q&A feed module. It provides context for questions, answers, and related interactions to all child components. It internally renders following components. To customize this wrapper component, you have to customise the mentioned components.

Advanced Customisation​

Customising LMQNAFeedDetails​

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

Hooks Used​

Below is an example for customising the view for LMQNAFeedDetails and rendering your own view. It is fairly a 2 simple step process

  • Step 1: Create your own custom view.
import {
 LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs";

// Custom Component for LMQNAFeedDetails
const CustomLMQNAFeedDetailsView = () => {
  return (
    // Your Custom Code
  );
};
  • Step 2: Pass your Custom View to LMQNAFeed
import {
  LMQNAFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
  LMQNAFeedUniversalFeed,
} from "@likeminds.community/likeminds-feed-reactjs"

const App = () => {
  const lmFeedClient = initiateFeedClient()

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMQNAFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        CustomComponents={{
          CustomFeedDetails: <CustomLMQNAFeedDetailsView />,
        }}
      >
        <LMQNAFeedUniversalFeed />
      </LMQNAFeed>
    </div>
  )
}
export default App

Reference​

For reference, check out this file