WebShareJS

Generate webshare content for mobile applications with ease using WebShareJS.

Table of Contents

• Introduction
• Features
• Installation
• Usage
  • HTML
  • JavaScript
• API
  • WebShareJS
  • Methods
  • Types
• License

Introduction

WebShareJS is a JavaScript library designed to simplify the process of sharing content from web applications to mobile devices. It supports generating images from HTML content and sharing text, URLs, and files using the native sharing capabilities of mobile browsers.

Features

• Generate images from HTML content
• Share text, URLs, and files
• Easy integration with existing web applications
• Lightweight and flexible

Installation

Install WebShareJS using npm:

With npm:

npm install webshare-js

Or include the script in your HTML file:

<script src="https://webshare-js-cdn.pages.dev/webshare.umd.js"></script>

Usage

HTML

Add the following HTML elements to your page:

<div id="webshare">
    <p>Hello, World!</p>
</div>

JavaScript

With ES6 modules:

import WebShareJS, { ShareQueryData } from 'webshare-js'

const webshare = new WebShareJS()

const shareData: ShareQueryData = {
    files: [
        {
            query: '#webshare',
            title: 'Generated content'
        }
    ],
    title: 'WebShareJS',
    text: 'Generate webshare content with ease',
    url: 'https://example.com'
}

webshare.share(shareData)
    .then(() => {
        console.log('Content shared successfully')
    })
    .catch((error) => {
        console.error('Failed to share content:', error)
    })

With a script tag:

const webshare = new window.WebShareJS()

const shareData = {
    files: [
        {
            query: '#webshare',
            title: 'Generated content'
        }
    ],
    title: 'WebShareJS',
    text: 'Generate webshare content with ease',
    url: 'https://example.com'
}

webshare.share(shareData)
    .then(() => {
        console.log('Content shared successfully')
    })
    .catch((error) => {
        console.error('Failed to share content:', error)
    })

API

WebShareJS

import WebShareJS from 'webshare-js'

Constructor

new WebShareJS(options?: WebShareOptions)

Options

• silent - A boolean indicating whether to suppress log messages.

Methods

sharingSupported(): boolean Checks if the sharing API is supported.

public sharingSupported(): boolean

canShare(shareData: ShareData) Checks if the given data can be shared.

public canShare(shareData: ShareData): boolean

share(data: ShareQueryData) Shares the provided data using the native sharing capabilities.

public share(data: ShareQueryData): Promise<void>

Types

ShareData Data structure for sharing content. Refer to the Web Share API for more information.

ShareQueryData Data structure for sharing content with generated images. Same as ShareData but with overridden files property.

export interface ShareQueryData extends Omit<ShareData, 'files'> {
    files: Array<ShareQueryFileData>
}

ShareQueryFileData Data structure for sharing generated images.

export interface ShareQueryFileData {
    /* The title to use for the picture */
    title: string
    /* To use as querySelector to generate the picture by */
    query: string

    /* Options for the image from html-to-image library */
    imageOptions?: Options
}

For more information, refer to the html-to-image library.

License

This project is licensed under the ISC License. You are free to use, copy, modify, and distribute this software for any purpose, with or without fee. For more details, see the ISC License.