New
NextJS, SvelteKit, Remix and the future of StorybookAutomate with Chromatic
Star75,387
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
@degjs/storybook-addon-taffy
A responsive viewport addon for Storybook
npm install @degjs/storybook-addon-taffy
Last updated almost 3 years ago
676
Downloads per week
Readme View on GitHub

Taffy

Taffy is a responsive viewport addon for Storybook. This addon was heavily inspired by Ish, the delightful resizer built into Pattern Lab, Brad Frost's atomic design visualizer and static site generator.

Although there are other Storybook resizers out there, Taffy brings some great new features to the party, including:

  • Dynamic resizing via a draggable handle on the right side of the viewport
  • Precise resizing by value entry, in either pixels or ems
  • One-click small, medium and large breakpoint buttons that resize the viewport to a randomized width within each range.
  • Full-screen view.
  • Support for resizing withing the Storybook Docs tab

Installation

Install the following npm module in your project:

npm i --save-dev @degjs/storybook-addon-taffy

Then, register the addon in the addons array in .storybook/main.js:

module.exports = {
    ...
    addons: [
        '@degjs/storybook-addon-taffy/register'
    ]
};

Finally, import withTaffy and add the decorator within .storybook/preview.js, like this:

import { addDecorator } from '@storybook/react';
import { withTaffy } from '@degjs/storybook-addon-taffy';

addDecorator(withTaffy);

That's it! Restart your Storybook build, and you should see Taffy controls in the toolbar, as well as a resize handle on the right side of your story previews.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI