React Package Documentation

React components and hooks for integrating notifications into your React applications with ease. This package provides seamless integration with the unified notification service.

Installation

npm install @sparkstrand/notifications-react

This package requires @sparkstrand/notifications-core as a peer dependency and integrates with the unified notification service.

Setting Up Your App

App Registration

Before using notifications, your app must register with the notification service using your own provider API keys. This ensures complete isolation from other applications.

// In your app initialization
import {notificationService} from '@sparkstrand/notifications-core';

await notificationService.registerApp({
  appId: 'sporty-expats',
  name: 'SportyExpats',
  providers: {
    novu: {
      apiKey: process.env.SPORTY_EXPATS_NOVU_API_KEY,
      appId: process.env.SPORTY_EXPATS_NOVU_APP_ID,
      priority: 1
    },
    resend: {
      apiKey: process.env.SPORTY_EXPATS_RESEND_API_KEY,
      fromEmail: 'notifications@sportyexpats.com',
      priority: 2
    }
  }
});

Provider Configuration

Each app manages its own provider credentials:

  • • Novu: For push notifications, in-app notifications, and multi-channel delivery
  • • Resend: For direct email delivery with custom templates
  • • Twilio: For SMS notifications (when implemented)
  • • Custom providers: Add your own notification providers

Key Features

  • • Unified Service Integration: Seamless integration with the notification service
  • • React Hooks: Easy-to-use hooks for notification management
  • • Real-time Updates: Automatic notification updates and real-time delivery status
  • • TypeScript Support: Full type safety and IntelliSense
  • • Customizable Components: Flexible notification components with theming support
  • • Provider Fallback: Automatic fallback to alternative providers if primary fails
  • • Performance Optimized: Efficient rendering and minimal re-renders

Core Components

NotificationCenter

Main notification display component that shows all notifications for the current user.

<NotificationCenter
  maxNotifications={5}
  showUnreadBadge
  onNotificationClick={handleClick}
/>

NotificationBadge

Unread notification counter that can be placed anywhere in your app.

<NotificationBadge
  count={unreadCount}
  maxCount={99}
  variant="dot"
/>

NotificationItem

Individual notification display component with customizable styling.

<NotificationItem
  notification={notification}
  onMarkAsRead={handleMarkAsRead}
  onDelete={handleDelete}
/>

NotificationList

Scrollable list of notifications with pagination and filtering support.

<NotificationList
  notifications={notifications}
  pageSize={20}
  onLoadMore={loadMore}
/>

React Hooks

useNotifications

Main hook for managing notifications in your React components.

const {
  notifications,
  unreadCount,
  markAsRead,
  deleteNotification,
  refreshNotifications
} = useNotifications();

useNotificationPreferences

Hook for managing user notification preferences and settings.

const {
  preferences,
  updatePreferences,
  isLoading
} = useNotificationPreferences();

useNotificationService

Direct access to the notification service for advanced operations.

const {
  sendNotification,
  sendBulkNotifications,
  getNotificationStats
} = useNotificationService();

Usage Examples

Basic Setup

import {useNotifications, NotificationCenter} from
  '@sparkstrand/notifications-react';

function App() {
  const {notifications, unreadCount} = useNotifications();

  return (
    <div>
      <NotificationBadge count={unreadCount} />
      <NotificationCenter />
      <YourApp />
    </div>
  );
}

Sending Notifications

import {useNotificationService} from '@sparkstrand/notifications-react';

function NotificationSender() {
  const {sendNotification} = useNotificationService();

  const handleSend = async () => {
    await sendNotification(
      'user-123',
      'INFO',
      'Welcome!',
      'Thanks for joining our platform',
      { email: 'user@example.com' },
      { appId: 'sporty-expats' }
    );
  };

  return <button onClick={handleSend}>Send Notification</button>;
}

Custom Notification Component

function CustomNotification({notification}) {
  const {markAsRead, deleteNotification} = useNotifications();

  return (
    <div className="custom-notification">
      <h3>{notification.title}</h3>
      <p>{notification.content}</p>
      <div className="actions">
        <button onClick={() => markAsRead(notification.id)}>
          Mark Read
        </button>
        <button onClick={() => deleteNotification(notification.id)}>
          Delete
        </button>
      </div>
    </div>
  );
}

Customization

Theming & Styling

All components support extensive customization through CSS classes and theme props:

  • • CSS Custom Properties: Customize colors, spacing, and typography
  • • Theme Props: Pass custom themes to components
  • • CSS Modules: Use CSS modules for component-specific styling
  • • Styled Components: Integrate with styled-components or emotion
  • • Tailwind CSS: Full Tailwind CSS support with custom classes

Best Practices

  • • Register early: Register your app during application startup
  • • Use hooks appropriately: Choose the right hook for your use case
  • • Handle loading states: Show loading indicators while notifications are being fetched
  • • Error boundaries: Wrap notification components in error boundaries
  • • Performance optimization: Use React.memo for notification components when appropriate
  • • Accessibility: Ensure notification components are accessible to screen readers
  • • Testing: Test notification components with different data and states