Skip to Content
DocsDeveloper GuideNative Plugins

Using WebF Native Plugins

WebF’s true power is unlocked when you access native device features. This is done through a system of native plugins, which are published as standard npm packages, making them easy for web developers to consume.

Using Pre-built Plugins

The WebF team and community provide a growing ecosystem of pre-built plugins that expose native capabilities to your JavaScript code.

The workflow is simple and familiar:

1. Find a Plugin

You can discover available plugins on the npm registry  or by checking our official list of plugins. Packages are typically named with the @openwebf scope, for example @openwebf/webf-share.

2. Install the Plugin

Add the plugin to your project using npm or your preferred package manager.

npm install @openwebf/webf-share

3. Import and Use it in Your Code

Once installed, you can import the plugin’s functionality directly into your JavaScript or React components.

// Example: Using the WebF Share plugin
import React from 'react';
import { WebFShare } from '@openwebf/webf-share';
 
function ShareButton() {
  const handleShare = async () => {
    if (WebFShare.isAvailable()) {
      await WebFShare.shareText({ text: 'Hello from WebF!' });
    }
  };
 
  return <button onClick={handleShare}>Share</button>;
}

Available Native Plugins

Here are the currently available WebF native plugins:

@openwebf/webf-share

Provides access to the native system share dialog.

import { WebFShare } from '@openwebf/webf-share';
 
// Share text
await WebFShare.shareText({
  title: 'Check this out!',
  text: 'WebF is amazing',
  url: 'https://openwebf.com'
});
 
// Or use the React hook
import { useWebFShare } from '@openwebf/webf-share';
 
function MyComponent() {
  const { share, isAvailable } = useWebFShare();
 
  const handleShare = () => {
    share({
      text: 'Hello from WebF!',
      url: 'https://openwebf.com'
    });
  };
 
  return (
    <button onClick={handleShare} disabled={!isAvailable}>
      Share
    </button>
  );
}

Open deep links and handle incoming deep links in your app.

import { WebFDeepLink } from '@openwebf/webf-deeplink';
 
// Open a deep link
const result = await WebFDeepLink.openDeepLink({
  url: 'whatsapp://send?text=Hello',
  fallbackUrl: 'https://wa.me/?text=Hello'
});
 
if (result.success) {
  console.log('Deep link opened successfully');
} else {
  console.error('Failed:', result.error);
}
 
// Register a handler for incoming deep links
await WebFDeepLink.registerDeepLinkHandler({
  callback: (url) => {
    console.log('Received deep link:', url);
    // Handle the deep link in your app
  }
});

Creating a New Plugin

Creating a native plugin from scratch is an advanced topic that involves native development with Dart/Flutter and, potentially, platform-specific code (like Swift, Kotlin, or C++). This process allows you to expose any native functionality imaginable to your WebF application.

The high-level steps include:

  1. Writing the native Dart code for your feature.
  2. Using WebF’s binding tools to create the connection between Dart and JavaScript.
  3. Publishing the plugin as an npm package for other developers to use.

This process is outside the scope of this guide. For a full walkthrough, please refer to our dedicated Native Plugin Development Guide (coming soon).

Best Practices

Check Availability

Always check if a plugin is available before using it. Some plugins may not be available in all environments (e.g., web preview vs. native app).

if (WebFShare.isAvailable()) {
  await WebFShare.shareText({ text: 'Hello!' });
} else {
  console.log('Share is not available in this environment');
}

Handle Errors

Wrap plugin calls in try-catch blocks to handle potential errors gracefully.

try {
  const photo = await Camera.takePicture();
  // Process photo
} catch (error) {
  console.error('Failed to take picture:', error);
  // Show user-friendly error message
}

Request Permissions

Some plugins may require user permissions (camera, location, etc.). Make sure to handle permission requests appropriately and provide clear explanations to users about why your app needs these permissions.

Performance Considerations

While the Native Binding System is highly optimized, be mindful of:

  • The frequency of calls between JavaScript and native code
  • The size of data being passed across the boundary
  • Avoid passing large objects or arrays frequently

For data-intensive operations, consider batching updates or using more efficient data structures.

Finding More Plugins

To discover the full ecosystem of available WebF native plugins:

  • Search npm for packages with the @openwebf scope
  • Check the official WebF GitHub organization
  • Browse community-contributed plugins
  • Ask in the WebF community forums or Discord

If you need a plugin that doesn’t exist yet, consider:

  1. Opening an issue to request it
  2. Creating it yourself (see the Native Plugin Development Guide)
  3. Hiring a developer to create it for you
State ManagementTesting