Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Render Modes
Storybook addon that adds ability to emulate render mode (css user preferences) of a story
npm install storybook-addon-render-modes
Last updated 2 months ago
573
Downloads per week
Readme View on GitHub

Storybook Addon Render Modes

This addon adds ability to emulate user CSS rendering preferences such as prefers-reduced-motion and others.

image

Initially fork of storybook-addon-css-user-prefs to support sb@^8.0.0

List of supported modes:

  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-data
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • print (todo)
  • noscript (todo)

Installation

  1. Package installation pnpm add -D storybook-addon-render-modes

  2. Addon registration

const config: StorybookConfig = {
  // ...yourOtherSettings
  addons: [
    'storybook-addon-render-modes',
  ],
};

export default config;

Caveats

This addon doesnt force changing of rendering mode in browser level (seems impossible). But instead it uses hacky approach: we go through document.styleSheets via JS and manually rewriting media style rules.

This approach may work not as expected in some cases. Feel fre to create an issue for such cases.

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI