npm package: @qratilabs/qrati-connect
Description: Qrati Connect - A React-based micro frontend component
Author: Qrati Labs
Latest version: 2.10.0

<p align="center">
  <img src="https://qrati.com/images/qrati-connect-banner.jpg" alt="Qrati Connect Banner" style="max-width:100%;height:auto;" />
</p>

<p align="center">
  <a href="https://www.npmjs.com/package/@qratilabs/qrati-connect"><img src="https://img.shields.io/npm/v/@qratilabs/qrati-connect.svg" alt="npm version"></a>
  <a href="https://www.npmjs.com/package/@qratilabs/qrati-connect"><img src="https://img.shields.io/npm/dm/@qratilabs/qrati-connect.svg" alt="npm downloads"></a>
  <a href="https://github.com/qrati-labs/qrati-connect-ts/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@qratilabs/qrati-connect.svg" alt="license"></a>
  <img src="https://img.shields.io/badge/TypeScript-Ready-blue.svg" alt="TypeScript">
</p>

---

# Qrati Connect — Embeddable Media & Engagement SDK 🚀

**Qrati Connect** is a compact, production-grade SDK for embedding photo galleries, uploads, curation, and engagement into any web app. Built with strict TypeScript, Preact compatibility, and careful bundling to deliver a fast, accessible, and themeable integration.

---

## Why Qrati Connect? 💡

- **Plug & Play**: Use the Web Component anywhere, or import the React wrapper for rapid integration.
- **Strict TypeScript**: Full typings for safer integration and better DX.
- **Performance-first**: Small initial bundle, strategic lazy-loading for heavy features (HEIC conversion, upload tooling).
- **Accessible & Themeable**: ARIA-friendly; visual theme is centrally configured via the Qrati Organization Settings page and applied to the component (exposed via CSS variables and className hooks).

---

## Highlights — What’s inside ✨

- Interactive media gallery with lightbox, blurhash placeholders and infinite scroll
- Smart uploads: compression, chunked progress, HEIC → JPEG conversion (on-demand)
- Reactions, curation workflow, and leaderboards for engagement

---

## Quick Install & Integration

### Install

```bash
pnpm add @qratilabs/qrati-connect
# or
npm install @qratilabs/qrati-connect
```

### React (Client Component)

```tsx
'use client';
import { QratiConnect } from '@qratilabs/qrati-connect';

export default function Page() {
    return <QratiConnect organizationId='your-org-id' router='memory' />;
}
```

### Web Component (Framework Agnostic)

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/web.es.js"></script>
<qrati-connect organization-id="your-org-id" router="hash"></qrati-connect>
```

---

## Props & Attributes

| Prop / Attribute    | Type                     | Default    | Description                            |
| ------------------- | ------------------------ | ---------- | -------------------------------------- |
| `organizationId` \* | `string`                 | —          | Your Qrati organization ID (required)  |
| `router`            | `'memory' \| 'hash'`     | `'memory'` | Routing strategy for navigation        |
| `uid`               | `string`                 | —          | Pre-authenticated user ID              |
| `fname`             | `string`                 | —          | Pre-authenticated user first name      |
| `lname`             | `string`                 | —          | Pre-authenticated user last name       |
| `theme`             | `'light' \| 'dark'`      | `'light'`  | Color scheme                           |
| `onError`           | `(error: Error) => void` | —          | Error callback for handling SDK errors |

\* Required

---

## Events & Callbacks

| Callback  | Payload | Description                           |
| --------- | ------- | ------------------------------------- |
| `onError` | `Error` | Fires when an error occurs in the SDK |

---

## Performance & Bundling

We optimize for small initial loads and lazy-load heavy features:

- Initial: ~139 KB gzipped (core UI + essentials)
- Upload feature: +~73 KB gzipped (lazy)
- HEIC conversion (heic2any): large dependency loaded only on-demand (~345 KB gzipped)

---

## Support

- Report bugs or request features via GitHub Issues: https://github.com/qrati-labs/qrati-connect-ts/issues
- See `docs/` for architecture, component, and hook references
- For commercial support: support@qrati.com

---

## License

MIT © Qrati Labs — https://qrati.com

---

Visit `docs/` for full API and integration patterns.