@developyr/lokryn-dispatch

Lokryn Dispatch - React Notification Component

A drop-in React component library for integrating Lokryn Dispatch notification system into your React applications.

Overview

@developyr/lokryn-dispatch is a reusable React component that provides a complete notification UI with:

• Bell icon button with unread badge
• Notification list modal
• Detailed notification viewer
• API integration with Lokryn Dispatch service
• User interaction tracking
• Optional digital signature support

Installation

npm install @developyr/lokryn-dispatch

Quick Start

import DispatchNotifications from '@developyr/lokryn-dispatch';
import '@developyr/lokryn-dispatch/dist/style.css';

function App() {
  return (
    <div>
      <DispatchNotifications
        apiKey="your-api-key"
        group="your-notification-group"
        userId="user-123"
      />
    </div>
  );
}

Features

🔔 Notification Bell

• Clean, minimalist bell icon using Heroicons
• Dynamic unread badge showing notification count
• Disabled state during loading/errors

📋 Notification List

• Scrollable dropdown modal
• Visual distinction between read and unread notifications
• Notification preview with title and message excerpt
• Click to view full details

📄 Notification Details

• Full-screen modal card with complete notification content
• Optional hero image support
• Custom fields display (formatted JSON)
• Action buttons (primary action and dismiss)
• Digital signature support with legal confirmation
• Scrollable content area

🔌 API Integration

• Automatic notification fetching on component mount
• Group-based filtering
• User-specific tracking
• Bearer token authentication
• Interaction recording (reads, dismissals, approvals)

🎨 Customizable Styling

• CSS module with dispatch-prefixed classes
• Custom className props for all major elements
• Responsive design
• Tailwind-inspired color palette

Props

Required Props

Prop	Type	Description
apiKey	string	API authentication key for Lokryn Dispatch
group	string	Notification group identifier
userId	string	User identifier for tracking read/unread status and interactions

Optional Props

Prop	Type	Default	Description
apiBaseUrl	string	'https://api-test.lokryn.com'	Base URL for API endpoints
className	string	undefined	Custom class for bell wrapper
listModalClassName	string	undefined	Custom class for notification list modal
detailModalClassName	string	undefined	Custom class for detail modal

API Endpoints

The component communicates with two Lokryn Dispatch API endpoints:

GET /dispatch/v1/notifications

Fetches notifications for the specified group and user.

Query Parameters:

• group: Notification group (sent twice: specific group + "all")
• userId: (Optional) User identifier

Headers:

• Authorization: Bearer {apiKey}

POST /dispatch/v1/events

Records user interactions with notifications.

Body:

{
  "notificationId": "string",
  "responseValue": "string",
  "userId": "string",
  "snapshot": { /* notification data */ }
}

Headers:

• Authorization: Bearer {apiKey}

TypeScript Support

The package is written in TypeScript and exports all necessary types:

import DispatchNotifications, {
  Notification,
  Button,
  DispatchNotificationsProps,
  InteractionEventPayload,
  NotificationCache
} from '@developyr/lokryn-dispatch';

Key Types

interface Notification {
  id: string;
  content: {
    title: string;
    message: string;
    heroImageUrl?: string;
    footer?: string;
    buttons?: Button[];
    customFields?: Record<string, string>;
    requiresInitials?: boolean;
  };
  status: 'read' | 'unread';
}

interface Button {
  id: string;
  label: string;
  actionType: string;
  actionValue: string;
}

interface DispatchNotificationsProps {
  apiKey: string;
  group: string;
  userId: string;
  apiBaseUrl?: string;
  className?: string;
  listModalClassName?: string;
  detailModalClassName?: string;
}

Custom Styling

The component uses CSS with dispatch-prefixed classes for easy customization:

Main Classes

• .dispatch-bell-wrapper - Bell button wrapper
• .dispatch-bell-button - Bell button element
• .dispatch-badge - Unread notification badge
• .dispatch-modal-overlay - Modal backdrop
• .dispatch-modal-content-list - Notification list modal
• .dispatch-notification-item - Individual notification in list
• .dispatch-notification-item.read - Read notification state
• .dispatch-detail-card - Detail modal card
• .dispatch-action-button - Action buttons

Example Custom Styling

/* Override bell button color */
.dispatch-bell-button {
  background-color: #your-brand-color;
}

/* Customize modal width */
.dispatch-modal-content-list {
  max-width: 500px;
}

/* Style primary action button */
.dispatch-action-button.primary {
  background-color: #your-accent-color;
}

Usage Examples

Basic Implementation

<DispatchNotifications
  apiKey="your-api-key"
  group="general"
/>

With User Tracking

<DispatchNotifications
  apiKey="your-api-key"
  group="user-alerts"
  userId={currentUser.id}
/>

Custom Styling

<DispatchNotifications
  apiKey="your-api-key"
  group="notifications"
  className="my-custom-bell"
  listModalClassName="my-custom-list"
  detailModalClassName="my-custom-detail"
/>

Custom API Endpoint

<DispatchNotifications
  apiKey="your-api-key"
  group="updates"
  apiBaseUrl="https://api.yourcompany.com"
/>

State Management

The component uses a custom React hook (useDispatchNotifications) that manages:

• Notification fetching and caching
• Loading and error states
• User interaction tracking
• Optimistic UI updates
• Double-click prevention

Hook Interface

const {
  notifications,
  loading,
  error,
  handleInteraction
} = useDispatchNotifications({
  apiKey,
  group,
  userId,
  apiBaseUrl
});

Development

Prerequisites

• Node.js 16+
• npm or yarn

Setup

cd lokryn-dispatch
npm install

Scripts

• npm run dev - Start Vite dev server
• npm run build - Build library (generates TypeScript declarations and bundles)
• npm run lint - Run ESLint
• npm run preview - Preview built package

Build Output

The build process generates:

• dist/lokryn-dispatch.js - ES module
• dist/lokryn-dispatch.umd.cjs - UMD bundle
• dist/index.d.ts - TypeScript declarations
• dist/style.css - Component styles

Tech Stack

• React 16.8.0+ (peer dependency)
• TypeScript 5.9.3
• Vite 7.1.12 (build tool)
• @heroicons/react 2.2.0 (bell icon)
• ESLint 9.39.0 (code quality)

Browser Support

The component supports all modern browsers that support:

• ES6+ JavaScript
• React 16.8+
• CSS Flexbox

License

See package.json for license information.

Contributing

This is a private package developed by Developyr for Lokryn Dispatch integration.

Support

For issues or questions, please contact the Lokryn team or file an issue in the repository.

Built with ❤️ using React + TypeScript + Vite