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.
# Using npm:
npm i @kogp/orientation-service
# Using yarn:
yarn add @kogp/orientation-service
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>
import { orientationService } from '@kogp/orientation-service';
orientationService({
landscapePages: ['/Orientation-Service/demo/index.html'],
devMode: true,
overlay: 'orientationOverlay',
bgColor: '#000',
mobileOnly: true,
});
- 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 toorientationOverlay
- 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
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.