https://github.com/raiper34/device-rotation-prompt

The device rotation prompt is the library to show a fullscreen prompt message when device orientation is different than you expect.
https://github.com/raiper34/device-rotation-prompt

device orientation prompt rotate

Last synced: 6 months ago
JSON representation

The device rotation prompt is the library to show a fullscreen prompt message when device orientation is different than you expect.

• Host: GitHub
• URL: https://github.com/raiper34/device-rotation-prompt
• Owner: Raiper34
• License: mit
• Created: 2023-06-24T17:07:49.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2025-04-14T12:16:16.000Z (6 months ago)
• Last Synced: 2025-04-26T00:03:51.088Z (6 months ago)
• Topics: device, orientation, prompt, rotate
• Language: TypeScript
• Homepage: https://device-rotation-prompt.netlify.app/
• Size: 2.35 MB
• Stars: 16
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/device-rotation-prompt.svg)](https://badge.fury.io/js/device-rotation-prompt)

[![docs](https://badgen.net/badge/docs/online/orange)](https://device-rotation-prompt.netlify.app)

![npm bundle size](https://img.shields.io/bundlephobia/min/device-rotation-prompt)

![NPM](https://img.shields.io/npm/l/device-rotation-prompt)

[![CircleCI](https://circleci.com/gh/Raiper34/device-rotation-prompt.svg?style=shield)](https://circleci.com/gh/Raiper34/device-rotation-prompt)

[![Coverage Status](https://coveralls.io/repos/github/Raiper34/device-rotation-prompt/badge.svg?branch=main)](https://coveralls.io/github/Raiper34/device-rotation-prompt?branch=main)

[![npm](https://img.shields.io/npm/dt/device-rotation-prompt)](https://badge.fury.io/js/device-rotation-prompt)

[![npm](https://img.shields.io/npm/dm/device-rotation-prompt)](https://badge.fury.io/js/device-rotation-prompt)

[![npm](https://img.shields.io/npm/dw/device-rotation-prompt)](https://badge.fury.io/js/device-rotation-prompt)

[![](https://data.jsdelivr.com/v1/package/npm/device-rotation-prompt/badge?style=rounded)](https://www.jsdelivr.com/package/npm/device-rotation-prompt)

[![GitHub Repo stars](https://img.shields.io/github/stars/raiper34/device-rotation-prompt)](https://github.com/Raiper34/device-rotation-prompt)

# 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](#-instalation)

- [📚 Documentation](#-documentation)

- [💻 Usage](#-usage)

    - [🌐 Browser](#-browser)

- [⚖️ License](#-license)

# 🚀 Instalation

Install **Device rotation prompt** library using npm

```sh

npm install device-rotation-prompt --save

```

or with jsdelivr

```html

```

# 📚 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.

```javascript

const prompt = new DeviceRotationPrompt();

```

and you get

![Device rotation prompt demo](demo.gif)

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

```javascript

prompt.destroy();

```

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

```javascript

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.

```html

    const prompt = new deviceRotationPrompt.DeviceRotationPrompt({orientation: 'landscape'});

```

# ⚖️ License

[MIT](https://choosealicense.com/licenses/mit/)