New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-wakelock
Storybook Addon enables you to activate WakeLock API through toolbar
npm install storybook-addon-wakelock
Last updated 4 months ago
1
Downloads per week
Readme View on GitHub

storybook-addon-wakelock

npm GitHub code style: dprint

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.

Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI