New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
storybook-addon-wakelock
Storybook Addon enables you to activate WakeLock API through toolbar
npm install storybook-addon-wakelock
Last updated about 1 month ago
2
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,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI