Node's Play Mate

    @zappar/mobile-only
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    Mobile Only

    Build

    This library allows you to redirect desktop users to mobile by displaying a QR code alongside instructions for the user to follow.

    Table Of Contents

    Click to expand table of contents

    Starting Development

    You can use this library by downloading a standalone zip containing the necessary files, by linking to our CDN, or by installing from NPM for use in a webpack project.

    Standalone Download

    Download the bundle from this link: https://libs.zappar.com/zappar-mobile-only/0.0.2/zappar-mobileonly.zip

    Unzip into your web project and reference from your HTML like this:

    <script src="zappar-mobileonly.js"></script>

    CDN

    Reference the zappar-mobileonly.js library from your HTML like this:

    <script src="https://libs.zappar.com/zappar-mobile-only/0.0.2/zappar-mobileonly.js"></script>

    NPM Webpack Package

    Run the following NPM command inside your project directory:

    $ npm install --save @zappar/mobile-only

    Then import the library into your JavaScript or TypeScript files:

    import * as MobileOnly from "@zappar/mobile-only";

    Usage

    Detecting Browsers

    The MobileOnly.isMobile() function returns true if a mobile browser is being used.

    import * as MobileOnly from "@zappar/mobile-only";
    const mobile = MobileOnly.isMobile(); // boolean
    console.log(mobile);

    User agent can be provided to the isMobile() function, if not specified, navigator.userAgent is used:

    import * as MobileOnly from "@zappar/mobile-only";
    const mobile = MobileOnly.isMobile('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36');
    console.log(mobile);

    Displaying the UI

    The QR code shown is generated from the current window.location.href.

    Default

    You can show the redirection UI using MobileOnly.showUI(). This should be used alongside MobileOnly.isMobile():

    import * as MobileOnly from "@zappar/mobile-only";
    
    if (!MobileOnly.isMobile()){
      MobileOnly.showUI();
    }

    The showUI function appends the elements as children of document.body, with z-index of 10000.

    Customization

    showUI() function may be customized using an options parameter. Here's the available options alongside default values:

    type Options = {
        header? : string,       // 'Almost there...';
        instructions? : string, // "Use your phone's camera to scan the QR code below";
        footer? : string,       // 'or visit';
        url? : string           //  window?.location?.href || '0.0.0.0';
    }

    Example:

    import * as MobileOnly from "@zappar/mobile-only";
    
    if (!MobileOnly.isMobile()){
      MobileOnly.showUI({
        url : 'www.zappar.com'
      });
    }

    This shows the UI seen at the top of this readme.

    Install

    npm i @zappar/mobile-only

    DownloadsWeekly Downloads

    12

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    30.7 kB

    Total Files

    13

    Last publish

    Collaborators

    • seenevz
    • cgauld
    • deim
    • simon_zappar
    • jordan-zappar
    • george.martin
    • emmaford
    • squeral
    • francesca.may
    • justin_zappar