https://github.com/degjs/storybook-addon-taffy

A responsive viewport addon for Storybook
https://github.com/degjs/storybook-addon-taffy

Last synced: about 1 month 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 (almost 5 years ago)
• Default Branch: main
• Last Pushed: 2024-05-02T14:59:07.000Z (8 months ago)
• Last Synced: 2024-11-11T20:27:11.271Z (about 2 months ago)
• Language: JavaScript
• Size: 499 KB
• Stars: 15
• Watchers: 4
• 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.