Skip to main content

​
Installing Notification Control

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

​
Prerequisites

Before installing, ensure you’ve completed CLI setup:
1

Initialize CLI

npx @replyke/cli init
Creates your replyke.json configuration file.
2

Install Dependencies

npm install @replyke/react-js framer-motion lucide-react
Required for React (Web). CLI will check for these.
See the CLI Setup Guide for details.

​
Installation Command

npx @replyke/cli add notifications-control

​
What Gets Installed

The CLI will copy 5 files into your project: 
src/components/notifications-control/
├── index.ts                              # Barrel export (entry point)
├── components/                           # UI components (4 files)
│   ├── notification-control.tsx          # Main dropdown control
│   ├── notification-list.tsx             # List with infinite scroll
│   ├── notification-item.tsx             # Individual notification
│   └── notification-icon.tsx             # Type-based icon display
└── utils/                                # Utilities (1 file)
    └── notification-utils.ts             # Time formatting, text truncation
Total: 5 files - Much simpler than comment components!

​
CLI Output Example

$ npx @replyke/cli add notifications-control

✅ Successfully installed notifications-control!

📁 Files added to: src/components/notifications-control/
📦 Total files: 5

Required dependencies:
  - @replyke/react-js@^6.0.0
  - framer-motion@^11.0.0
  - lucide-react@^0.400.0

Usage:
  import NotificationControl from './components/notifications-control';

  <NotificationControl
    triggerComponent={BellIcon}
    onNotificationClick={(notification) => {
      console.log(notification);
    }}
  />

Next steps:
  1. Wrap your app with <ReplykeProvider>
  2. Create a trigger component (bell icon)
  3. Handle notification clicks

​
Basic Usage

After installation, import and use the component: 
import NotificationControl from './components/notifications-control';

function Header() {
  const BellTrigger = ({ unreadCount }: { unreadCount: number }) => (
    <button className="relative">
      🔔
      {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);
          // Navigate to notification target
        }}
      />
    </nav>
  );
}
Make sure your app is wrapped with <ReplykeProvider>. See the Quick Start Guide for setup details.

​
With Custom Bell Icon

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

const BellTrigger = ({ unreadCount }: { unreadCount: number }) => (
  <div className="relative">
    <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>
    )}
  </div>
);

<NotificationControl
  triggerComponent={BellTrigger}
  onNotificationClick={(notif) => {
    // Handle click
  }}
/>

​
Complete Example

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

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

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 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={(notification) => {
            // Navigate based on notification type
            if (notification.type === 'comment-reply') {
              navigate(`/posts/${notification.metadata.entityId}#comment-${notification.metadata.commentId}`);
            } else if (notification.type === 'new-follow') {
              navigate(`/users/${notification.metadata.followerId}`);
            }
          }}
          onViewAllNotifications={() => navigate('/notifications')}
        />
      </nav>
    </header>
  );
}

​
Switching Styling Variants

If you want to switch between Tailwind and Inline Styles after installation:
1

Delete Current Component

rm -rf src/components/notifications-control
2

Update Configuration

Edit replyke.json:
{
  "style": "styled"  // Change to "tailwind" or vice versa
}
3

Re-install

npx @replyke/cli add notifications-control

​
Verification

1

Check Files Exist

ls src/components/notifications-control
# Should show: index.ts, components/, utils/
2

Try Importing

import NotificationControl from './components/notifications-control';
// Should have no TypeScript errors
3

Run Dev Server

npm run dev
The component should render without errors.

​
Troubleshooting

Make sure your import path matches your componentsPath:
// If componentsPath is "src/components"
import NotificationControl from './components/notifications-control';

// If componentsPath is "app/ui"
import NotificationControl from './ui/notifications-control';
Install lucide-react:
npm install lucide-react
Ensure @replyke/react-js is properly configured:
import { ReplykeProvider } from '@replyke/react-js';

<ReplykeProvider projectId="your-id" signedToken={token}>
  <App />
</ReplykeProvider>

​
Next Steps

Props & API

Learn about component props

Customization

Customize colors and layout

Integration Examples

See real-world examples

Overview

Back to overview