Qrati Connect is a React component library designed to seamlessly integrate Qrati's interactive features into your web applications to enhance user engagement and interaction.

Features

• Interactive Media Gallery : Integrate Qrati's powerful interactive media gallery into your own site without a hassle.
• Media Upload : Users can directly upload content from your host site.
• Reaction : Engage your users with a completely customizable set of emojis.
• Curation : Want to host a photo contest? Our curation feature can be a one stop solution for that.
• Leaderboard : Gamify your contest with a precise and fun leaderboard.

Installation (React Component)

Install qrati-connect using npm, yarn, pnpm or bun:

npm install @qratilabs/qrati-connect
# or
yarn add @qratilabs/qrati-connect
# or
pnpm add @qratilabs/qrati-connect
# or
bun install @qratilabs/qrati-connect

Sample react page -

import QratiConnect from '@qratilabs/qrati-connect/react';
import '@qratilabs/qrati-connect/react/styles.css';

const Page = () => {
    return (
        <QratiConnect
            organizationId=<org_id>
        />
    );
};

export default Page;

Note: Add 'use client' directive if you are using any React frameworks which supports Server Side Rendering (SSR) like Next.js.

Available props

• router : Custom router configuration for internal navigation ('memory or 'hash').
• organizationId : Unique identifier for your organization inside Qrati.
• fontClassName : Classes to control custom font for the component.
• textClassName : Classes to apply any additional styling to texts inside the component.
• emptyStateImage : Link or path to image which will be shown for any empty state in the component.
• curateLabel : Label to show in place of 'Curate' in header for contest type events.
• leaderboardLabel : Label to show in place of 'Leaders' in header for contest type events.
• uid : User id for your application user (applicable for custom auth only).
• fname : First name for your application user (applicable for custom auth only).
• lname : Last name for your application user (applicable for custom auth only).
• loginUrl : The page url inside your web app where we should redirect when authentication is required for user intended action (applicable for custom auth only).

Qrati Connect Element (Web Component)

Qrati Connect is also available as a Web Component (Custom Element) that you can use directly in your HTML without React. This is useful for non-React applications or when you want to embed Qrati Connect in static HTML pages.

Installation via CDN (jsDelivr)

Add the following script and stylesheet tags to your HTML:

<!-- Import the Web Component -->
<script type="module" src="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/web.es.js"></script>
<!-- Import the styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@qratilabs/qrati-connect/element/styles.css" />

Usage

Once imported, you can use the custom element tag <qrati-connect> in your HTML:

<qrati-connect router="hash" organization-id="your-organization-id" />

Note: When using the Web Component version, props are passed as HTML attributes with kebab-case naming (e.g., organization-id instead of organizationId).

3. Tailwindv3 -> Tailwindv4

bg-primary, bg-secondary -> bg-background text-primary -> text-foreground text-secondary -> text-muted bg-brand, text-brand -> bg-primary, text-primary qc-text-lg, qc-bg-red-500 -> qc:text-lg, qc:bg-red-500

4. IconifyReact -> Iconify Tailwindv4

->