Skip to main content

​
Installing Notification Control

Add a notification dropdown control to your navigation bar with a single command.

​
Prerequisites

1

Initialize CLI

npx @sublay/cli init
Creates your sublay.json. Select react as platform (notifications are web-only).
2

Install Dependencies

npm install @sublay/react-js framer-motion lucide-react
See the CLI Setup Guide for details.

​
Installation Command

npx @sublay/cli add notifications-control

​
What Gets Installed

Only 5 files — much simpler than comment components: 
src/components/notifications-control/
├── index.ts                              # Barrel export (entry point)
├── components/
│   ├── notification-control.tsx          # Main dropdown control
│   ├── notification-list.tsx             # List with infinite scroll
│   ├── notification-item.tsx             # Individual notification row
│   └── notification-icon.tsx            # Type-based icon display
└── utils/
    └── notification-utils.ts             # Time formatting, text truncation

​
Basic Usage

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

function Header() {
  const BellTrigger = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative p-2 hover:bg-gray-100 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 (
    <nav>
      <NotificationControl
        triggerComponent={BellTrigger}
        onNotificationClick={(notification) => {
          console.log('Clicked:', notification);
        }}
      />
    </nav>
  );
}
Make sure your app is wrapped with <SublayProvider>. See the Quick Start Guide for details.

​
Complete Example

import { SublayProvider } from '@sublay/react-js';
import NotificationControl from './components/notifications-control';
import { Bell } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

function App() {
  return (
    <SublayProvider projectId="your-project-id" signedToken={token}>
      <Header />
      <main>{/* Your app */}</main>
    </SublayProvider>
  );
}

function Header() {
  const navigate = useNavigate();

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

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

        <NotificationControl
          triggerComponent={BellIcon}
          onNotificationClick={(notification) => {
            if (notification.type === 'comment-reply') {
              navigate(`/posts/${notification.metadata.entityId}`);
            } else if (notification.type === 'new-follow') {
              navigate(`/users/${notification.metadata.followerId}`);
            }
          }}
          onViewAllNotifications={() => navigate('/notifications')}
        />
      </nav>
    </header>
  );
}

​
Switching Styling Variants

1

Delete Current Component

rm -rf src/components/notifications-control
2

Update Configuration

{ "style": "styled" }
3

Re-install

npx @sublay/cli add notifications-control

​
Troubleshooting

// paths.components = "src/components"
import NotificationControl from './components/notifications-control';

npm install lucide-react
Ensure <SublayProvider> wraps the component and signedToken is set correctly.

​
Next Steps

Props & API

Learn about component props

Customization

Customize colors and layout

Integration Examples

See real-world examples

Overview

Back to overview