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

• 🚀 Instalation
• 📚 Documentation
• 💻 Usage
  • 🌐 Usage in browser
• 📖 License

🚀 Instalation

Install library using npm npm install device-rotation-prompt --save and import main class into your code base import {DeviceRotationPrompt} from 'device-orientation-prompt';.

📚 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();
Copy

and you get

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

prompt.destroy();
Copy

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',
    ...
});
Copy

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

🌐 Usage in 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@1/dist/browser-bundle.min.js"></script>
<script>
    const prompt = new deviceRotationPrompt.DeviceRotationPrompt({orientation: 'landscape'});
</script>
Copy

📖 License

MIT