Sendify

A real-time notification library for React and Next.js applications.

Installation

npm install sendify framer-motion lucide-react

framer-motion and lucide-react are peer dependencies and must be installed separately.

Usage

Server-side: Sending notifications

import { Sendify } from "sendify"

const sendify = new Sendify("your-api-key", "your-project-id")

await sendify.sendNotifications(
  ["user-id-1", "user-id-2"],
  "You have a new message!",
  "View",        // optional button text (max 2 words)
  "https://..."  // optional button URL
)

Client-side: Displaying notifications

import { NotificationFeed } from "sendify"

function App() {
  return (
    <NotificationFeed
      userId="user-id-1"
      align="center"       // "start" | "center" | "end"
      theme="dark"         // "light" | "dark"
    />
  )
}

Configuration

Both the server and client accept a custom API base URL for self-hosting:

// Server-side
const sendify = new Sendify("api-key", "project-id", {
  baseUrl: "https://your-selfhosted-instance.com"
})

// Client-side
<NotificationFeed
  userId="user-id-1"
  baseUrl="https://your-selfhosted-instance.com"
  socketUrl="https://your-websocket-instance.com"
/>

API

Sendify

| Method | Params | Description | |---|---|---| | sendNotifications(userIds, content, buttonText?, buttonUrl?) | string[], string, string?, string? | Sends a notification to one or more users |

NotificationFeed Props

| Prop | Type | Default | Description | |---|---|---|---| | userId | string | required | User ID to fetch/stream notifications for | | align | "start" \| "center" \| "end" | "center" | Horizontal alignment of the popover card | | theme | "light" \| "dark" | "dark" | Color theme | | baseUrl | string | https://sendify.100xbuild.com | Custom REST API URL for self-hosting | | socketUrl | string | https://sendify-socket.onrender.com | Custom WebSocket URL for self-hosting |

Development

npm install
npm run dev     # watch mode
npm run build   # production build
npm test        # run tests

License

MIT