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:
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.