DEV Community

Cover image for Adding a React-native In-app Notification Feed for Real-time Updates
Nik L. for SuprSend

Posted on

Adding a React-native In-app Notification Feed for Real-time Updates

In this guide, we'll walk through the process of integrating the SuprSend In-App Notification Center into your React applications. SuprSend offers a convenient SDK that allows you to seamlessly incorporate Inbox and Toast notifications into your web applications.


Try Playground/ Sandbox first -

Prerequisites

Before we begin, ensure that you have the following prerequisites installed:

  • Node.js and npm/yarn: Make sure you have Node.js and npm (or yarn) installed on your development machine.

Installation

First, install the SuprSend React Inbox package using npm or yarn:

npm install --save @suprsend/react-inbox
Enter fullscreen mode Exit fullscreen mode

or

yarn add @suprsend/react-inbox
Enter fullscreen mode Exit fullscreen mode

Integration

Once you've installed the package, you can integrate the SuprSend In-App Notification Center into your React components.

import SuprSendInbox from '@suprsend/react-inbox';

function Example() {
  return (
    <SuprSendInbox
      workspaceKey='<workspace_key>'
      workspaceSecret='<workspace_secret>'
      subscriberId='<subscriber_id>'
      distinctId='<distinct_id>'
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

In the above code snippet:

  • workspaceKey: This is your SuprSend workspace key.
  • workspaceSecret: This is your SuprSend workspace secret.
  • subscriberId: This is the unique identifier of the subscriber.
  • distinctId: This is the unique identifier for the user. It can be a user ID or any other identifier that you use in your application.

https://www.suprsend.com/

Ensure that you replace the placeholder values with your actual SuprSend credentials and subscriber information.

Interaction with React Components - Example

Once integrated, the SuprSend In-App Inbox will automatically handle the display of messages within your React application. You can interact with the Inbox component using various methods provided by the SuprSend SDK.

For example, you can trigger the display of a notification message when a certain event occurs in your application. This can be achieved by calling the appropriate SDK method within your React components.

import { SuprSendInbox } from '@suprsend/react-inbox';

function Example() {
  const handleClick = () => {
    // Trigger a notification message
    SuprSendInbox.showNotification('New message received!');
  };

  return (
    <div>
      <button onClick={handleClick}>Show Notification</button>
      <SuprSendInbox
        workspaceKey='<workspace_key>'
        workspaceSecret='<workspace_secret>'
        subscriberId='<subscriber_id>'
        distinctId='<distinct_id>'
      />
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

Interaction with Your Application

The SuprSend In-App Inbox seamlessly integrates with your React application, allowing you to deliver targeted messages and notifications to your users based on their interactions and behaviors within the application.

  • Contextual Messages: You can send contextual messages and announcements to users based on specific events or actions within your application.

  • User Engagement: The In-App Inbox enhances user engagement by providing a centralized location for users to access important messages and updates.

  • Personalization: You can personalize messages and notifications based on user attributes and preferences, ensuring relevant and meaningful communication.

Usage

Once integrated, the SuprSend In-App Notification Center will handle the display of inbox and toast notifications within your React application based on the configuration provided during integration.

Conclusion

Incorporating the SuprSend In-App Notification Center into your React application is a straightforward process. By following the steps outlined in this guide, you can enhance user engagement and communication by leveraging the power of inbox and toast notifications provided by SuprSend.

For more advanced usage and customization options, refer to the official documentation provided by SuprSend.

Happy coding!


Here is the Github react native repo for the same. Try headless to get your own custom native inbox:


GitHub logo suprsend / suprsend-react-inbox

SuprSend SDK for integrating inbox functionality in React applications

@suprsend/react-inbox

Integrating SuprSend Inbox channel in React websites can be done in two ways:

  • SuprSendInbox component which comes with UI and customizing props.
  • SuprSendProvider headless component and hooks, incase you want to totally take control of UI. (example: Full page notifications).

Detailed documentation can be found here: https://docs.suprsend.com/docs/inbox-react

Installation

You can install SuprSend inbox SDK using npm/yarn

npm install @suprsend/react-inbox
Enter fullscreen mode Exit fullscreen mode

SuprSendInbox Integration

After installing, Import the component in your code and use it as given below. Replace the variables with actual values.

import SuprSendInbox from '@suprsend/react-inbox'
import 'react-toastify/dist/ReactToastify.css' // needed for toast notifications, can be ignored if hideToast=true

// add to your react component;
<SuprSendInbox
  workspaceKey='<workspace_key>'
  subscriberId='<subscriber_id>'
  distinctId='<distinct_id>'
/>
Enter fullscreen mode Exit fullscreen mode
interface ISuprSendInbox {
  workspaceKey: string
  distinctId: string | null
  subscriberId: string | null
  tenantId?: string
  stores?: IStore[]
  pageSize?: number
  pagination?: boolean
Enter fullscreen mode Exit fullscreen mode

Top comments (0)