react – Tawasal Platform

check our Documentation 👉 platform.tawasal.ae

This library provides a set of React hooks to integrate with the Tawasal SuperApp API, allowing you to interact with various functionalities such as fetching user data, handling clipboard operations, scanning QR codes, and more.

Installation

npm i @tawasal/react

Usage

`useContacts`

Allows selecting contacts and fetching their details including avatar URLs.

Example

import React, { useState } from 'react';
import { useContacts } from '@tawasal/react';
 
const ContactSelector = () => {
  const { contacts, isLoading, error, triggerSelect } = useContacts();
 
  return (
    <div>
      <button onClick={() => triggerSelect('Select a contact')}>
        Select Contacts
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      {contacts && (
        <ul>
          {contacts.map(contact => (
            <li key={contact.userId}>
              {contact.name} - {contact.photoUrl && <img src={contact.photoUrl} alt="Avatar" />}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
 
export default ContactSelector;

`useQR`

Shows the QR code scanner and returns the scanned QR code.

Example

import React, { useEffect } from 'react';
import { useQR } from '@tawasal/react';
 
const QRScanner = () => {
    const {qr, isLoading, error, triggerScan, closeScan} = useQR();
 
    useEffect(()=> {
        // don't forget that your code and user can close scan. So if you recieved data you wanted
        // from user, you can close scan faster then user to provide better UX.
        if (!!qr) {
            closeScan()
        }
    }, [qr])
 
    return (
        <div>
            <button onClick={triggerScan}>Scan QR Code</button>
            <button onClick={closeScan}>Close Scanner</button>
            {isLoading && <div>Loading...</div>}
            {error && <div>Error: {error.message}</div>}
            {qr && <p>QR Code: {qr}</p>}
        </div>
    );
};
 
export default QRScanner;

`useTawasalSDK`

Provides additional Tawasal SDK functionalities such as haptic feedback, opening destinations, managing app state, and sharing content.

Available Methods

haptic(pressure?) - Triggers haptic feedback with specified pressure (‘light’, ‘medium’, ‘heavy’, ‘soft’, ‘rigid’)
open(destination) - Opens a specific destination within the app (e.g., ‘chats’, ‘wallet’, ‘settings’)
openApp(appUrl, tag?) - Opens another app with the specified URL and optional tag
openUrl(url) - Opens a URL in the browser
openChat(userIdOrNickname) - Opens a chat with a specific user by ID or nickname
closeApp() - Closes or hides the app intelligently
close() - Closes the app
share({ text, url, imgUrl?, isCustomIos? }) - Shares content via the Tawasal SuperApp
disablePullToRefresh(disabled) - Enables or disables pull-to-refresh functionality

Example

import React from 'react';
import { useTawasalSDK } from '@tawasal/react';
 
const TawasalActions = () => {
  const {
    haptic,
    open,
    openApp,
    openUrl,
    openChat,
    closeApp,
    close,
    share,
    disablePullToRefresh
  } = useTawasalSDK();
 
  return (
    <div>
      <button onClick={() => haptic('light')}>Haptic Feedback</button>
      <button onClick={() => open('chats')}>Open Chats</button>
      <button onClick={() => openApp('myapp://home')}>Open Another App</button>
      <button onClick={() => openUrl('https://tawasal.ae')}>Open URL</button>
      <button onClick={() => openChat('username')}>Open Chat</button>
      <button onClick={closeApp}>Close App</button>
      <button onClick={close}>Force Close</button>
      <button onClick={() => disablePullToRefresh(true)}>Disable Pull to Refresh</button>
      <button
        onClick={() =>
          share({
            text: 'Check out this link!',
            url: 'https://example.com',
          })
        }
      >
        Share
      </button>
    </div>
  );
};
 
export default TawasalActions;

Fixes for compabilty

Next.js

`error: ESM packages need to be imported`

add esm support to your next.js config

experimental: {
  esmExternals: "loose" 
}

License

Distributed under the MIT License. See LICENSE for more information.

Web Vue