npm package manager

    storybook-addon-wakelock
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    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.

    Install

    npm i storybook-addon-wakelock

    DownloadsWeekly Downloads

    0

    Version

    0.1.2

    License

    Apache-2.0

    Unpacked Size

    41.4 kB

    Total Files

    29

    Last publish

    Collaborators

    • pocka