Receive shared content from other apps
npm install @capgo/capacitor-share-targetCapacitor plugin to receive shared content from other apps.
| Plugin version | Capacitor compatibility | Maintained |
| -------------- | ----------------------- | ---------- |
| v8.\.\ | v8.\.\ | ✅ |
| v7.\.\ | v7.\.\ | On demand |
| v6.\.\ | v6.\.\ | ❌ |
| v5.\.\ | v5.\.\ | ❌ |
> Note: The major version of this plugin follows the major version of Capacitor. Use the version that matches your Capacitor installation (e.g., plugin v8 for Capacitor 8). Only the latest major version is actively maintained.
``bash`
npm install @capgo/capacitor-share-target
npx cap sync
Add the following to your AndroidManifest.xml inside the tag to allow your app to receive shared content:
`xml`
You can customize the mimeType to match the types of content you want to receive (e.g., text/, image/, video/, /*).
For iOS, you need to create a Share Extension to receive shared content. This requires additional setup:
1. In Xcode, go to File > New > Target
2. Select "Share Extension" and click Next
3. Name it (e.g., "ShareExtension") and click Finish
4. Configure the Share Extension to save data to a shared App Group (e.g., group.com.yourcompany.app)capacitor.config.ts
5. Configure the plugin in your or capacitor.config.json:
`typescript`
{
plugins: {
CapacitorShareTarget: {
appGroupId: "group.com.yourcompany.app"
}
}
}
6. In your ShareViewController.swift, save the shared data using the key "share-target-data" or "SharedData" to UserDefaults with your app group ID
Example ShareViewController.swift:
`swift
import UIKit
import UniformTypeIdentifiers
class ShareViewController: UIViewController {
let APP_GROUP_ID = "group.com.yourcompany.app" // Same as in capacitor.config
let APP_URL_SCHEME = "yourapp" // Your app's URL scheme
private var texts: [[String: Any]] = []
private var files: [[String: Any]] = []
override public func viewDidLoad() {
super.viewDidLoad()
guard let extensionItem = extensionContext?.inputItems.first as? NSExtensionItem,
let attachments = extensionItem.attachments else {
self.exit()
return
}
Task {
// Process attachments...
// (See full implementation in issue examples)
// Save to UserDefaults
let shareData: [String: Any] = [
"title": extensionItem.attributedTitle?.string ?? "",
"texts": texts,
"files": files
]
let userDefaults = UserDefaults(suiteName: APP_GROUP_ID)
userDefaults?.set(shareData, forKey: "share-target-data")
userDefaults?.synchronize()
// Open main app with your URL scheme
let url = URL(string: "\(APP_URL_SCHEME)://share")!
self.openURL(url)
}
}
// ... rest of implementation
}
`
For detailed instructions, see the iOS Share Extension documentation.
`typescript
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';
// Listen for shared content
CapacitorShareTarget.addListener('shareReceived', (event) => {
console.log('Title:', event.title);
console.log('Texts:', event.texts);
event.files?.forEach(file => {
console.log(File: ${file.name});Type: ${file.mimeType}
console.log();URI: ${file.uri}
console.log();`
});
});
* addListener('shareReceived', ...)
* removeAllListeners()
* getPluginVersion()
* Interfaces
Capacitor Share Target Plugin interface.
This plugin allows your application to receive content shared from other apps.
Users can share text, URLs, and files to your app from other applications.
`typescript`
addListener(eventName: 'shareReceived', listenerFunc: (event: ShareReceivedEvent) => void) => Promise
Listen for shareReceived event.
Registers a listener that will be called when content is shared to the application
from another app. The callback receives event data containing title, texts, and files.
| Param | Type | Description |
| ------------------ | ------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
| eventName | 'shareReceived' | The event name. Must be 'shareReceived'. |
| listenerFunc | (event: ShareReceivedEvent) => void | Callback function invoked when content is shared to the app. |
Returns: Promise<PluginListenerHandle>
Since: 0.1.0
--------------------
`typescript`
removeAllListeners() => Promise
Remove all listeners for this plugin.
Since: 0.1.0
--------------------
`typescript`
getPluginVersion() => Promise<{ version: string; }>
Get the native Capacitor plugin version.
Returns the current version of the native plugin implementation.
Returns: Promise<{ version: string; }>
Since: 0.1.0
--------------------
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| remove | () => Promise<void> |
#### ShareReceivedEvent
Event data received when content is shared to the application.
| Prop | Type | Description | Since |
| ----------- | ------------------------- | ------------------------------------------------ | ----- |
| title | string | The title of the shared content. | 0.1.0 |
| texts | string[] | Array of text content shared to the application. | 0.1.0 |
| files | SharedFile[] | Array of files shared to the application. | 0.2.0 |
#### SharedFile
Represents a file shared to the application.
| Prop | Type | Description | Since |
| -------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| uri | string | The URI of the shared file. On Android/iOS this will be a file path or data URL. On web this will be a cached URL accessible via fetch. | 0.1.0 |
| name | string | The name of the shared file, with or without extension. | 0.1.0 |
| mimeType | string | The MIME type of the shared file. | 0.1.0 |
Here's a complete example of handling shared content in your app:
`typescript
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';
import { Capacitor } from '@capacitor/core';
export class ShareService {
async initialize() {
// Only add listener on native platforms
if (Capacitor.isNativePlatform()) {
await CapacitorShareTarget.addListener('shareReceived', this.handleSharedContent);
}
}
private handleSharedContent(event: ShareReceivedEvent) {
console.log('Received shared content!');
// Handle shared text
if (event.texts.length > 0) {
console.log('Shared text:', event.texts[0]);
// Process the shared text (e.g., URL, note, etc.)
}
// Handle shared files
if (event.files.length > 0) {
event.files.forEach(async (file) => {
console.log(Processing file: ${file.name});
if (file.mimeType.startsWith('image/')) {
// Handle image files
await this.processImage(file.uri);
} else if (file.mimeType.startsWith('video/')) {
// Handle video files
await this.processVideo(file.uri);
}
});
}
}
private async processImage(uri: string) {
// Your image processing logic here
}
private async processVideo(uri: string) {
// Your video processing logic here
}
async cleanup() {
await CapacitorShareTarget.removeAllListeners();
}
}
``
See CONTRIBUTING.md.
MIT