Integration Examples

Real-world examples of integrating NotificationControl into different applications.

Next.js App Router

// app/components/Header.tsx
'use client';

import NotificationControl from '@/components/notifications-control';
import { Bell } from 'lucide-react';
import { useRouter } from 'next/navigation';

export default function Header() {
  const router = useRouter();

  const BellIcon = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
          {unreadCount}
        </span>
      )}
    </button>
  );

  return (
    <header className="border-b">
      <nav className="container mx-auto px-4 py-3 flex justify-between items-center">
        <h1>My App</h1>

        <NotificationControl
          triggerComponent={BellIcon}
          onNotificationClick={(notif) => {
            router.push(`/notifications/${notif.id}`);
          }}
          onViewAllNotifications={() => router.push('/notifications')}
        />
      </nav>
    </header>
  );
}

React Router (SPA)

// components/Navigation.tsx
import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

export default function Navigation() {
  const navigate = useNavigate();

  const handleNotificationClick = (notification: any) => {
    // Navigate based on notification type
    switch (notification.type) {
      case 'comment-reply':
        navigate(`/posts/${notification.metadata.entityId}#comment-${notification.metadata.commentId}`);
        break;
      case 'entity-mention':
        navigate(`/entities/${notification.metadata.entityId}`);
        break;
      case 'new-follow':
        navigate(`/profile/${notification.metadata.followerId}`);
        break;
      default:
        navigate('/notifications');
    }
  };

  const BellIcon = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative">
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && <span className="badge">{unreadCount}</span>}
    </button>
  );

  return (
    <nav>
      <NotificationControl
        triggerComponent={BellIcon}
        onNotificationClick={handleNotificationClick}
        onViewAllNotifications={() => navigate('/notifications')}
      />
    </nav>
  );
}

Filter notifications by category:

import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';

function SocialHeader() {
  return (
    <header>
      <NotificationControl
        triggerComponent={BellWithBadge}
        notificationTemplates={{
          'comment-reply': true,
          'comment-mention': true,
          'entity-upvote': true,
          'new-follow': true,
          'connection-accepted': true,
        }}
        onNotificationClick={(notif) => {
          if (notif.type === 'new-follow') {
            navigate(`/profile/${notif.metadata.followerId}`);
          } else if (notif.type === 'comment-reply') {
            navigate(`/post/${notif.metadata.entityId}`);
          }
        }}
      />
    </header>
  );
}

SaaS Dashboard

System notifications only:

import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';

function DashboardHeader() {
  return (
    <header>
      <NotificationControl
        triggerComponent={SystemBell}
        notificationTemplates={{
          'system': true,  // Only system notifications
        }}
        onNotificationClick={(notif) => {
          if (notif.metadata.buttonData) {
            window.location.href = notif.metadata.buttonData.url;
          }
        }}
      />
    </header>
  );
}

Mobile-Friendly Implementation

Responsive bell with proper mobile styling:

const MobileFriendlyBell = ({ unreadCount }: { unreadCount: number }) => (
  <button
    className="relative p-3 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full transition-colors"
    aria-label={`Notifications${unreadCount > 0 ? `, ${unreadCount} unread` : ''}`}
  >
    <Bell className="w-6 h-6 md:w-5 md:h-5" />
    {unreadCount > 0 && (
      <span className="absolute top-1 right-1 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
        {unreadCount > 9 ? '9+' : unreadCount}
      </span>
    )}
  </button>
);

<NotificationControl
  triggerComponent={MobileFriendlyBell}
  onNotificationClick={handleClick}
/>

With Theme Toggle

Sync with app theme:

import { useState, useEffect } from 'react';
import NotificationControl from './components/notifications-control';
import { Bell, Moon, Sun } from 'lucide-react';

function Header() {
  const [isDark, setIsDark] = useState(false);

  useEffect(() => {
    // Sync with system theme on mount
    setIsDark(window.matchMedia('(prefers-color-scheme: dark)').matches);
  }, []);

  return (
    <header className={isDark ? 'dark' : ''}>
      <nav>
        <button onClick={() => setIsDark(!isDark)}>
          {isDark ? <Sun /> : <Moon />}
        </button>

        <NotificationControl
          triggerComponent={BellIcon}
          onNotificationClick={handleClick}
          theme={isDark ? 'dark' : 'light'}  // Styled variant only
        />
      </nav>
    </header>
  );
}

Community Platform

Filter for community interactions:

<NotificationControl
  triggerComponent={BellIcon}
  notificationTemplates={{
    'comment-mention': true,
    'comment-reply': true,
    'entity-upvote': true,
    'entity-comment': true,
  }}
  onNotificationClick={(notif) => {
    // Deep link to specific content
    if (notif.metadata.commentId) {
      navigate(`/posts/${notif.metadata.entityId}#comment-${notif.metadata.commentId}`);
    } else if (notif.metadata.entityId) {
      navigate(`/posts/${notif.metadata.entityId}`);
    }
  }}
  onViewAllNotifications={() => navigate('/inbox')}
/>

With Analytics Tracking

Track notification interactions:

import { analytics } from '@/lib/analytics';

<NotificationControl
  triggerComponent={BellIcon}
  onNotificationClick={(notif) => {
    // Track click event
    analytics.track('Notification Clicked', {
      notificationId: notif.id,
      notificationType: notif.type,
      isRead: notif.isRead,
    });

    // Handle navigation
    handleNavigation(notif);
  }}
/>

Accessible Implementation

Full accessibility with ARIA labels:

const AccessibleBell = ({ unreadCount }: { unreadCount: number }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <button
      aria-label={`Notifications${unreadCount > 0 ? `, ${unreadCount} unread` : ''}`}
      aria-expanded={isOpen}
      aria-haspopup="true"
      onClick={() => setIsOpen(!isOpen)}
      className="relative"
    >
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && (
        <span
          aria-label={`${unreadCount} unread notifications`}
          className="badge"
        >
          {unreadCount}
        </span>
      )}
    </button>
  );
};

Complete Working Example

Full implementation with all features:

'use client';

import { useState } from 'react';
import { ReplykeProvider } from '@replyke/react-js';
import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';

export default function App() {
  const [isDark, setIsDark] = useState(false);

  const BellTrigger = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800">
      <Bell className="w-6 h-6" />
      {unreadCount > 0 && (
        <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center">
          {unreadCount}
        </span>
      )}
    </button>
  );

  return (
    <ReplykeProvider projectId={process.env.NEXT_PUBLIC_REPLYKE_KEY}>
      <div className={isDark ? 'dark' : ''}>
        <header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
          <nav className="container mx-auto px-4 py-3 flex items-center justify-between">
            <h1>My App</h1>

            <div className="flex items-center gap-4">
              <button onClick={() => setIsDark(!isDark)}>
                {isDark ? '☀️' : '🌙'}
              </button>

              <NotificationControl
                triggerComponent={BellTrigger}
                onNotificationClick={(notification) => {
                  console.log('Notification clicked:', notification);
                  // Handle navigation
                }}
                onViewAllNotifications={() => {
                  window.location.href = '/notifications';
                }}
              />
            </div>
          </nav>
        </header>

        <main>
          {/* Your app content */}
        </main>
      </div>
    </ReplykeProvider>
  );
}

Next Steps

Props & API

Component props reference

Customization

Customize appearance

Installation

Installation guide

Overview

Back to overview

Overview

Installation

Component Types

Threaded Comments

Social Comments

Notification Control

Customization

Migration

Legacy (Deprecated)

Integration Examples

Integration Examples

Next.js App Router

React Router (SPA)

SaaS Dashboard

Mobile-Friendly Implementation

With Theme Toggle

Community Platform

With Analytics Tracking

Accessible Implementation

Complete Working Example

Next Steps

Props & API

Customization

Installation

Overview

​Integration Examples

​Next.js App Router

​React Router (SPA)

​Social Media App

​SaaS Dashboard

​Mobile-Friendly Implementation

​With Theme Toggle

​Community Platform

​With Analytics Tracking

​Accessible Implementation

​Complete Working Example

​Next Steps

Props & API

Customization

Installation

Overview

Integration Examples

Next.js App Router

React Router (SPA)

Social Media App

SaaS Dashboard

Mobile-Friendly Implementation

With Theme Toggle

Community Platform

With Analytics Tracking

Accessible Implementation

Complete Working Example

Next Steps