Skip to main content
Version: 1.5.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!.