Shared Data Access

How it works: When users share content (like a photo from their gallery) to your app, the Despia runtime opens your application in a web view and injects the shared data through despia.sharedData. Images are provided as data URLs, text as plain strings. Video sharing is not yet supported.

Installation

Install the Despia package from NPM:

Copynpm install despia-native

Usage

1. Import the SDK

Copyimport despia from 'despia-native';

2. Access Shared Data

Check for and process shared data on page load:

Copy// Simple example - detect and display shared content
const sharedData = despia.sharedData;

if (sharedData) {
  // Check if it's an image (data URL starts with 'data:image/')
  if (sharedData.startsWith('data:image/')) {
    // Display shared image
    <img src={sharedData} alt="Shared content" />
  } else {
    // Display shared text
    <p>{sharedData}</p>
  }
}

3. Complete Component Example

Copyimport { useEffect, useState } from 'react';
import despia from 'despia-native';

function SharedContentHandler() {
  const [sharedContent, setSharedContent] = useState(null);
  const [contentType, setContentType] = useState(null);

  useEffect(() => {
    // Check for shared data on component mount
    const data = despia.sharedData;
    
    if (data) {
      setSharedContent(data);
      
      // Determine content type
      if (data.startsWith('data:image/')) {
        setContentType('image');
      } else {
        setContentType('text');
      }
    }
  }, []);

  if (!sharedContent) {
    return <p>No shared content</p>;
  }

  return (
    <div>
      <h2>Received Shared Content</h2>
      {contentType === 'image' ? (
        <img 
          src={sharedContent} 
          alt="Shared image" 
          style={{ maxWidth: '100%', height: 'auto' }}
        />
      ) : (
        <div>
          <p>Shared Text:</p>
          <pre>{sharedContent}</pre>
        </div>
      )}
    </div>
  );
}

Backend Integration

Save shared content to your backend for persistence:

Copy// Save shared content to backend
useEffect(() => {
  const data = despia.sharedData;
  
  if (data) {
    fetch('/api/save-shared-content', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        userId: user.id,
        content: data,
        contentType: data.startsWith('data:image/') ? 'image' : 'text',
        timestamp: new Date().toISOString()
      })
    });
  }
}, []);

Backend endpoint example:

Copy// /api/save-shared-content endpoint
export default async function handler(req, res) {
  const { userId, content, contentType, timestamp } = req.body;
  
  try {
    // Store the shared content in your database
    const result = await db.collection('shared_content').add({
      userId,
      content,
      contentType,
      receivedAt: timestamp,
      createdAt: timestamp
    });

    res.status(200).json({ success: true, id: result.id });
  } catch (error) {
    res.status(500).json({ error: 'Failed to save shared content' });
  }
}

Supported Content Types

• Images: Provided as data URLs (e.g., data:image/png;base64,...)

• Text: Provided as plain text strings

• Videos: Not yet supported

Resources

• NPM Package

• View full NPM documentation for additional configuration options

Lovable Integration

This SDK is optimized for Lovable's prompt-based AI builder, enabling quick integration of shared content handling into your generated apps.