Build your own feed UI (headless)

npm install @suprsend/react-core

import { SuprSendProvider, SuprSendFeedProvider } from '@suprsend/react-core';
// import { SuprSendProvider, SuprSendFeedProvider } from '@suprsend/react'; // if you use our inbuilt react components

function Example() {
  return (
    <SuprSendProvider publicApiKey={YOUR_KEY} distinctId={YOUR_DISTINCT_ID}>
      <SuprSendFeedProvider>Your Feed Component</SuprSendFeedProvider>
    </SuprSendProvider>
  );
}

import {useFeedClient} from '@suprsend/react-core';
// import { useFeedClient } from '@suprsend/react'; // if you use our inbuilt react components

function MyComponent() {
const feedClient = useFeedClient();

return (
  <p
    onClick={() => {
      feedClient.markAsSeen(notificationId);
    }}
  >
    Click Me
  </p>
);
}

import {useFeedData} from "@suprsend/react-core"
// import { useFeedData } from '@suprsend/react'; // if you use our inbuilt react components


function MyComponent() {
  const feedData = useFeedData();

  const notificationsList = feedData.notifications;
  return <div>{notificationsList.map(notification)=><p>{notification.n_id}</p>}</div>;
}

import {
  SuprSendProvider,
  SuprSendFeedProvider,
  useFeedData,
  useFeedClient,
} from "@suprsend/react-core";

function Example() {
  return (
    <SuprSendProvider
      publicApiKey={"YOUR_PUBLIC_API_KEY"}
      distinctId={"YOUR_DISTINCT_ID"}
    >
      <SuprSendFeedProvider>
        <MyFeedComponent />
      </SuprSendFeedProvider>
    </SuprSendProvider>
  );
}

function MyFeedComponent() {
  const feedData = useFeedData();
  const feedInstance = useFeedClient();

  if (!feedData) return null;
  if (feedData.apiStatus === "LOADING") return <p>Loading Data</p>;
  if (feedData.apiStatus === "SUCCESS" && !feedData?.notifications?.length) {
    return <p>No Notifications</p>;
  }
  if (feedData.notifications) {
    return (
      <div>
        <div>
          {feedData.notifications.map((notification) => {
            return (
              <div
                key={notification.n_id}
                onClick={() => {
                  feedInstance.markAsRead(notification.n_id);
                }}
              >
                {notification.n_id}
              </div>
            );
          })}
        </div>
        {feedData.apiStatus === "FETCHING_MORE" ? (
          <p>Loading More</p>
        ) : (
          <div>
            {feedData.pageInfo.hasMore && (
              <button
                onClick={() => {
                  feedInstance.fetchNextPage();
                }}
              >
                Next
              </button>
            )}
          </div>
        )}
      </div>
    );
  }
  return null;
}

import { NotificationCard } from '@suprsend/react';

<NotificationCard notificationData={data} />