storybook-addon-wakelock

Storybook Addon that adds a toolbar button to activate/deactivate WakeLock (screen lock).

Install

This addon is compatible with Storybook v6.5.x.

$ npm i -D storybook-addon-wakelock

Usage

Add this addon to addons array in your .storybook/main.js.

// .storybook/main.js
module.exports = {
  // ...
  addons: ["storybook-addon-wakelock", "@storybook/addon-essentials"],
};

You then have a button with lock icon on your Storybook toolbar.

Usage with polyfill

For browsers not supporting WakeLock API, you can enable polyfill mode powered by NoSleep.js. In order to enable this, you need to install the package and tell the addon to use the package.

$ npm i -D nosleep.js

Once you installed the package to your project, set polyfill option to true in your .storybook/main.js.

  // .storybook/main.js
  module.exports = {
    // ...
    addons: [
      // ...
-     "storybook-addon-wakelock",
+     {
+       name: "storybook-addon-wakelock",
+       options: {
+         polyfill: true,
+       }
+     },
      // ...
    ]
  }

Then you can lock screen on browsers without WakeLock API support.

Beaware that that package archives screen lock by hacky technique, so the functionality may be broken in future browser updates. Also, due to the package locks screen by playing blank video file with audio enabled, you may suffer an audio glitch or decreased playback quality depends on your system.