Skip to main content

Getting Started

The LikeMinds React Feed SDK empowers you to integrate personalized and interactive feed functionality into your React application, providing seamless communication experiences for your users. This guide will assist you in getting started with the LikeMinds React Feed SDK and setting up a dynamic feed in your application. Simply obtain the required API key from the LikeMinds dashboard and unlock the power of real-time messaging in your app.

Prerequisites​

Before you begin, make sure you have the following installed:

  • Node.js version 16 or above
  • ReactJS version 18.2.0
  • LikeMinds API Key: Sign up on the LikeMinds dashboard and obtain an API key for your application.

Step-by-Step Integration Guide​

Follow these steps to integrate the LikeMinds Feed SDK into your web application:

info

If you have a NextJS application follow this guide.

Step 1 - Installation​

Install the package using this command in the terminal

npm install @likeminds.community/likeminds-feed-reactjs@latest
tip

Should you encounter any version conflicts, consider running npm i --legacy-peer-deps to resolve them.

Step 2 - Initiate LMFeedClient & LMFeedCustomEvents​

Initiate LMFeedClient & LMFeedCustomEvents in you index.tsx file.

import {
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";
const lmFeedClient = initiateFeedClient();
const customEventClient = new LMFeedCustomEvents();

Step 3 - Render LikeMinds Feed​

After you have successfully initiated the LMFeedClient & LMFeedCustomEvents, now all you need to do is render LMFeed in your index.tsx file and pass down its instance as to client & customEventClient prop. Provide API Key directly to LikeMinds Feed SDK, which will be used to initiate a user session internally. Open up index.tsx or src/App.tsx and replace its contents with the following code:

import { useState } from "react";
import {
  LMSocialFeed,
  LMFeedNotificationHeader,
  LMFeedUniversalFeed,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

function App() {
  const [userDetails, setUserDetails] = useState<{
    uuid?: string;
    username?: string;
    isGuest?: boolean;
    apiKey?: string;
  }>({
    uuid: "ENTER YOUR USER UNIQUE ID",
    username: "ENTER YOUR USERNAME",
    isGuest: false, // Turn this flag to true in case you have a guest user
    apiKey: "ENTER YOUR API KEY",
  });

  // Initiated LMFeedClient
  const lmFeedClient = initiateFeedClient();

  // Initiated LMFeedCustomEvents
  const customEventClient = new LMFeedCustomEvents();

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMSocialFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
      >
        <LMFeedUniversalFeed />
      </LMSocialFeed>
    </div>
  );
}
export default App;
tip

For enhanced security, you can use Server Side User Authentication to initiate user sessions through your own server.

Step 4 - Run your application​

npm run dev
# OR
npm start

Your feed app is ready to run.