https://github.com/mikeesto/use-wake-lock

:bulb: A React hook for the Screen Wake Lock API. Can be used to prevent a device's screen from turning off.
https://github.com/mikeesto/use-wake-lock

hooks react wakelock

Last synced: 16 days ago
JSON representation

:bulb: A React hook for the Screen Wake Lock API. Can be used to prevent a device's screen from turning off.

• Host: GitHub
• URL: https://github.com/mikeesto/use-wake-lock
• Owner: mikeesto
• Created: 2020-07-21T04:35:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T01:56:23.000Z (7 months ago)
• Last Synced: 2024-10-10T19:14:51.274Z (about 1 month ago)
• Topics: hooks, react, wakelock
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/use-wake-lock
• Size: 894 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# useWakeLock

### A React hook for the Screen Wake Lock API. Can be used to prevent a device's screen from turning off.

[![NPM](https://img.shields.io/npm/v/use-wake-lock.svg)](https://www.npmjs.com/package/use-wake-lock) [![License: MIT](https://img.shields.io/badge/License-MIT-brightgreen.svg)](https://opensource.org/licenses/MIT) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

This hook uses the native Screen Wake Lock API that was released in Chrome v84. As this is a newly released feature, you may first want to check [browser compatibility](https://developer.mozilla.org/en-US/docs/Web/API/WakeLock/request#Browser_compatibility).

```bash

npm install --save use-wake-lock

```

## Usage

An example page is available [here](https://mikeesto.github.io/use-wake-lock/). The source code for the example can be found [here](https://github.com/mikeesto/use-wake-lock/blob/master/example/src/App.js).

### Toggle wake lock

Checkbox (or similar) that can be toggled to turn wake lock on or off.

```jsx

import React from "react";

import { useWakeLock } from "use-wake-lock";

const Example = () => {

  const { toggleWakeLock, wakeLockActive } = useWakeLock();

  return (

     toggleWakeLock()}

    />

    {wakeLockActive ? "on" : "off"}

  );

};

```

### Turn wake lock on and turn it off automatically after Y milliseconds

Button (or similar) that can be clicked to turn wake lock on. After a set period, provided in milliseconds, the wake lock is released.

```jsx

import React from "react";

import { useWakeLock } from "use-wake-lock";

const Example = () => {

  const { toggleWakeLock, wakeLockActive } = useWakeLock();

  return (

     toggleWakeLock(300000)>Keep screen on for 5 minutes

    {wakeLockActive ? " on" : " off"}

  );

};

```

## API

The hook provides three values:

- `toggleWakeLock`: A function you can call to toggle the wake lock. It accepts an optional parameter that is the duration (in milliseconds) that the wake lock should be active for.

- `wakeLockActive`: A boolean indicating whether the wake lock is active. The default value is false.

- `wakeLockError`: A string containing any errors when using the Wake Lock API. The most common error is if the browser does not support the API. The default value is an empty string.

## License

MIT.