Nautical Poseidon Mythology

    @degjs/storybook-addon-taffy

    1.0.4 • Public • Published

    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.

    Install

    npm i @degjs/storybook-addon-taffy

    DownloadsWeekly Downloads

    576

    Version

    1.0.4

    License

    ISC

    Unpacked Size

    20.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • heaper
    • briangraves
    • aladage
    • jlawhorn
    • designbykhalid
    • alejcerro
    • vequanc