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.

1. With API Key​

This approach should be used when you want to manage LikeMinds authentication tokens on frontend. In this case you provide API Key directly to LikeMinds Feed SDK, which will be used to initiate a user session internally. In this case user authentication flow will be managed us.

  1. Open up index.tsx or src/App.tsx and replace its contents with the following code:
import { useState } from "react";
import {
  LMFeed,
  LMFeedNotificationHeader,
  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} />
      <LMFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
      ></LMFeed>
    </div>
  );
}
export default App;

2. Without API Key​

This approach should be used when you want to manage LikeMinds authentication tokens on your backend server. In this case you eliminate the need to expose your API Key in your client app and your backend server is responsible for calling the Initiate API to obtain the accessToken and refreshToken which will be passed to userDetails prop of LMFeed.

  1. Create a function to get accessToken and refreshToken from your backend using Initiate API
function getTokens() {
  // Your implementation to fetch the LikeMinds authentication tokens
  // Also save these tokens in the initial state of the application as you will be required to pass these tokens to LMClientOverlayProvider.
}
  1. Create an instance of LMCoreCallbacks and pass in the necessary callback functions.
info

LMCoreCallbacks takes two arguments:

  1. onAccessTokenExpiredAndRefreshed(): This callback is triggered when the provided accessToken expires and is refreshed internally using the refreshToken.
  2. onRefreshTokenExpired() This callback is triggered when the provided refreshToken expires. In this case, you need to provide a new accessToken and refreshToken from your backend server using our initiate API.
const lmCoreCallback = new LMCoreCallbacks(
  (accessToken: string, refreshToken: string) => {
    // Handle Access and Refresh token as per your implementation
  },
  async () => {
    // Get New Tokens and return it in the below format
    return {
      accessToken: "YOUR NEW ACCESS TOKEN",
      refreshToken: "YOUR NEW REFRESH TOKEN",
    };
  }
);
  1. Open up src/App.tsx and replace its contents with the following code:
import { useState } from "react";

import {
  LMFeed,
  LMFeedNotificationHeader,
  LMFeedCustomEvents,
  initiateFeedClient,
} from "@likeminds.community/likeminds-feed-reactjs";

function App() {
  const [userDetails, setUserDetails] = useState<{
    accessToken?: string;
    refreshToken?: string;
  }>({
    accessToken: "ENTER YOUR ACCESS TOKEN",
    refreshToken: "ENTER YOUR REFRESH TOKEN",
  });
  const lmCoreCallback = new LMCoreCallbacks(
    (accessToken: string, refreshToken: string) => {
      // Handle Access and Refresh token as per your needs
    },
    async () => {
      // Get New Tokens and return it in the below format
      return {
        accessToken: "YOUR NEW ACCESS TOKEN",
        refreshToken: "YOUR NEW REFRESH TOKEN",
      };
    }
  );

  // Initiated LMFeedClient
  const lmFeedClient = initiateFeedClient();

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

  return (
    <div className="lm-wrapper">
      <LMFeedNotificationHeader customEventClient={customEventClient} />
      <LMFeed
        client={lmFeedClient}
        customEventClient={customEventClient}
        userDetails={userDetails}
        LMFeedCoreCallbacks={lmCoreCallback}
      ></LMFeed>
    </div>
  );
}

export default App;

Step 4 - Run your application​

npm run dev
# OR
npm start

Your feed app is ready to run.