@kogp/orientation-service NPM

orientation-service

GitHub repo size npm bundle size GitHub npm (tag)

Want to keep your users in landscape mode? This package will handle it all for you in only a few steps. 1.5~KB Simple package with no dependencies and no nonsense.

Demo

Installation

# Using npm:
 
npm i @kogp/orientation-service

# Using yarn:

yarn add @kogp/orientation-service

Usage

HTML:

Place the following code snippet inside the <body> tag before the </body> tag.

<div id="orientationOverlay">
    <h1 style="margin: auto;text-align: center;font-weight: normal;font-family: serif;">Please turn your device orientation</h1>
</div>

Javascript:

import { orientationService } from '@kogp/orientation-service';

orientationService({
        landscapePages: ['/Orientation-Service/demo/index.html'],
        devMode: true,
        overlay: 'orientationOverlay',
        bgColor: '#000',
        mobileOnly: true,
});

Options

landscapePages - array (List of paths that require landscape mode) - Required
devMode - boolean (Defines if package should run in development mode or not) - Defaults to false
overlay - string (ID of element to use as overlay) - Defaults to orientationOverlay
bgColor - string (Defines the color of the background, all valid css is valid here) - Defaults to #000
mobileOnly - boolean (Defines if the package should only be enabled on mobile devices) - Defaults to true