https://github.com/degjs/storybook-addon-taffy
A responsive viewport addon for Storybook
https://github.com/degjs/storybook-addon-taffy
Last synced: 19 days ago
JSON representation
A responsive viewport addon for Storybook
- Host: GitHub
- URL: https://github.com/degjs/storybook-addon-taffy
- Owner: DEGJS
- Created: 2020-02-19T03:39:36.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2024-05-02T14:59:07.000Z (about 1 year ago)
- Last Synced: 2025-04-09T23:10:55.359Z (3 months ago)
- Language: JavaScript
- Size: 499 KB
- Stars: 15
- Watchers: 3
- Forks: 3
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Taffy
Taffy is a responsive viewport addon for Storybook. This addon was heavily inspired by [Ish](https://github.com/bradfrost/ish.), the delightful resizer built into [Pattern Lab](https://patternlab.io/), 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.