@qratilabs/qrati-connect

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

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';
import '@qratilabs/qrati-connect/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

• 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 if you are using custom auth.
• fname : First name for your application user if you are using custom auth.
• lname : Last name for your application user if you are using custom auth.
• loginUrl : The page url inside your web app where we should redirect when authentication is required for user intended action.