Device rotation prompt

The device rotation prompt is the library to show a fullscreen prompt message when device orientation is different than you expect. It is designed to be used in html5 games, but it can be used on any website.

Content

• 🚀 Installation
• 📚 Documentation
• 💻 Usage
  • 🌐 Browser
• ⚖️ License

🚀 Instalation

Install Device rotation prompt library using npm

npm install device-rotation-prompt --save

or with jsdelivr

<script src="https://cdn.jsdelivr.net/npm/device-rotation-prompt@4.0.0/dist/device-rotation-prompt.iife.js"></script>

📚 Documentation

For more details and complete documentation check: https://device-rotation-prompt.netlify.app/

💻 Usage

If you do not need to configure and the default style and setting are enough, you can just instantiate the class and you are done.

const prompt = new DeviceRotationPrompt();

and you get

If you do not need this functionality anymore, you can destroy it using destroy method.

prompt.destroy();

If you want to configure the behavior and style of the prompt, you can pass the config object during instantiation.

const prompt = new DeviceRotationPrompt({
    orientation: DeviceOrientation.Landscape,
    backgroundColor: '#000000',
    imageColor: '#ffffff',
    ...
});

The properties are as follows and all are optional: https://device-rotation-prompt.netlify.app/interfaces/iconfig

🌐 Browser

You can also use this library in the browser without compiling using jsDelivr. Import script into HTML file, and you can access classes through the global treeUtils object.

<script src="https://cdn.jsdelivr.net/npm/device-rotation-prompt@4.0.0/dist/device-rotation-prompt.iife.js"></script>
<script>
    const prompt = new deviceRotationPrompt.DeviceRotationPrompt({orientation: 'landscape'});
</script>

⚖️ License

MIT