tessl/npm-expo-clipboard

Cross-platform clipboard management for React Native and Expo applications with text, image, and URL support

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

URL Operations (iOS Only)

Name: tessl/npm-expo-clipboard
Author: tessl

Specialized URL clipboard handling that preserves URL content type information for better app integration. These operations are only available on iOS platforms and provide enhanced functionality for URL-specific clipboard content.

Capabilities

Get URL

Retrieves a URL from the user's clipboard, specifically looking for URL content types.

/**
 * Gets the URL from the user's clipboard
 * @returns Promise that resolves to the URL string in the clipboard, or null if no URL found
 * @platform ios
 */
function getUrlAsync(): Promise<string | null>;

Usage Examples:

import * as Clipboard from "expo-clipboard";
import { Platform } from 'react-native';

// iOS-only URL retrieval
if (Platform.OS === 'ios') {
  const url = await Clipboard.getUrlAsync();
  if (url) {
    console.log("Found URL:", url);
    // Handle URL (e.g., open in browser, validate, etc.)
  } else {
    console.log("No URL in clipboard");
  }
}

// Conditional URL handling with fallback
const getClipboardUrl = async () => {
  if (Platform.OS === 'ios') {
    return await Clipboard.getUrlAsync();
  } else {
    // Fallback to regular string method on other platforms
    const text = await Clipboard.getStringAsync();
    // Simple URL validation
    try {
      new URL(text);
      return text;
    } catch {
      return null;
    }
  }
};

Set URL

Sets a URL in the user's clipboard with proper URL content type marking.

/**
 * Sets a URL in the user's clipboard.
 * This behaves the same as setStringAsync(), except that it sets the clipboard content type 
 * to be a URL. It lets your app or other apps know that the clipboard contains a URL and behave accordingly.
 * @param url - The URL to save to the clipboard
 * @platform ios
 */
function setUrlAsync(url: string): Promise<void>;

Usage Examples:

import * as Clipboard from "expo-clipboard";
import { Platform } from 'react-native';

// iOS-only URL setting
if (Platform.OS === 'ios') {
  await Clipboard.setUrlAsync("https://example.com");
  console.log("URL copied with proper content type");
}

// Cross-platform URL copying with iOS enhancement
const copyUrl = async (url: string) => {
  if (Platform.OS === 'ios') {
    // Use URL-specific method on iOS for better app integration
    await Clipboard.setUrlAsync(url);
  } else {
    // Fall back to regular string method on other platforms
    await Clipboard.setStringAsync(url);
  }
};

// Copy current page URL
const shareCurrentUrl = async () => {
  const currentUrl = "https://myapp.com/current-page";
  if (Platform.OS === 'ios') {
    await Clipboard.setUrlAsync(currentUrl);
    Alert.alert("URL Copied", "The URL has been copied to your clipboard");
  }
};

Has URL

Checks whether the clipboard contains URL content, specifically looking for URL content types.

/**
 * Returns whether the clipboard has URL content
 * @returns Promise that resolves to true if clipboard has URL content, false otherwise
 * @platform ios
 */
function hasUrlAsync(): Promise<boolean>;

Usage Examples:

import * as Clipboard from "expo-clipboard";
import { Platform } from 'react-native';

// Check for URL content on iOS
if (Platform.OS === 'ios') {
  const hasUrl = await Clipboard.hasUrlAsync();
  if (hasUrl) {
    const url = await Clipboard.getUrlAsync();
    console.log("Clipboard contains URL:", url);
  }
}

// Conditional UI based on clipboard URL content
const updatePasteButton = async () => {
  if (Platform.OS === 'ios') {
    const hasUrl = await Clipboard.hasUrlAsync();
    setShowUrlPasteOption(hasUrl);
  }
};

// Combined content type checking
const checkClipboardContent = async () => {
  if (Platform.OS === 'ios') {
    const hasText = await Clipboard.hasStringAsync();
    const hasUrl = await Clipboard.hasUrlAsync();
    const hasImage = await Clipboard.hasImageAsync();
    
    console.log({
      text: hasText,
      url: hasUrl,
      image: hasImage
    });
  }
};

Platform Considerations

iOS Only

All URL operations are only available on iOS
Other platforms should use regular string operations for URL handling
Always check Platform.OS === 'ios' before using these methods

Content Type Benefits

App Integration: Other iOS apps can detect URL content type and provide enhanced functionality
System Behavior: iOS system may handle URL clipboard content differently (e.g., in Safari, Mail)
Rich Interactions: URL content type enables richer paste experiences in compatible apps

Fallback Strategy

import * as Clipboard from "expo-clipboard";
import { Platform } from 'react-native';

const handleUrlClipboard = async (url: string) => {
  if (Platform.OS === 'ios') {
    // Use URL-specific operations on iOS
    await Clipboard.setUrlAsync(url);
    const hasUrl = await Clipboard.hasUrlAsync();
    if (hasUrl) {
      const retrievedUrl = await Clipboard.getUrlAsync();
      return retrievedUrl;
    }
  } else {
    // Fall back to string operations on other platforms
    await Clipboard.setStringAsync(url);
    const text = await Clipboard.getStringAsync();
    return text;
  }
  return null;
};

Error Handling

URL operations may throw UnavailabilityError if called on non-iOS platforms or if clipboard functionality is unavailable.

import * as Clipboard from "expo-clipboard";
import { UnavailabilityError } from 'expo-modules-core';
import { Platform } from 'react-native';

try {
  if (Platform.OS === 'ios') {
    const url = await Clipboard.getUrlAsync();
  }
} catch (error) {
  if (error instanceof UnavailabilityError) {
    console.log("URL clipboard operations not available");
  }
}