Skip to main content
Version: 1.3.x

Get Started

The Engagespots hooks library offers minimalistic integration for react applications. Developers can use essential API methods without being tied to our default UI or dependencies.

tip

React hooks library doesn't provide any UI components. If you're looking for UI-Kit for Javascript, you should use our React component or Browser Javascript UI Kit.

Quick Setup​

Before we start, make sure you have Engagespot API Key from your dashboard. Now, let's install the hooks package, and initialize.

npm install @engagespot/react-hooks

Initializing the Engagespot Provider​

Start by wrapping your application with the Engagespot Provider component. This authenticates your app against the Engagespot API using a userid and API key, and makes all Engagespot methods and values accessible throughout your application.

import { EngagespotProvider } from '@engagespot/react-hooks';

const App = () => {
  return (
    <EngagespotProvider
      options={{
        userId: 'youruser@example.com',
        apiKey: 'YOUR_ENGAGESPOT_API_KEY',
      }}
    >
      <NotificationFeed />
    </EngagespotProvider>;
  );
};

Fetching notifications​

To retrieve notifications, we'll utilize the useFeed hook. This hook provides an array of notifications, which we can directly incorporate into our application.

import { useFeed } from '@engagespot/react-hooks';

const { notifications } = useFeed();

notifications.forEach(notification => {
  console.log(notification.title);
});

Creating Notifications UI​

Finaly, we can render our notifications UI

import { useFeed } from '@engagespot/react-hooks';

const { notifications } = useFeed();

const NotificationFeed = () => {
  return (
    <>
      {notifications.map(notification => (
        <div key={notification.id}>{notification.title}</div>
      ))}
    </>
  );
};

Wrapping up​

Tutorial​

We have created a comprehensive step-by-step integration tutorial that guides you through each hook and demonstrates how to create a fully functional notification panel.

Realtime updates​

The Engagespot hooks library automatically monitors real-time socket changes and provides live updates for new notifications added to the user's feed.

Additional features​

While this was just a basic example to get started, the Engagespot hooks library offers many additional features for building a fully functional notification center. For more detailed information, explore our reference documentation.

Sample App​

The sample app, complete with integrated features using the hooks library, is available in our code repository. Feel free to explore it!.