kiya-storybook-addon-react-live-edit

    2.0.5 • Public • Published

    storybook-addon-react-live-edit

    DEMO

    Installation

    yarn add -D storybook-addon-react-live-edit

    Configure storybook

    To get this addon in your story book you have to register the panel, addLiveSource story creator and optionally add a scope decorator to make additional components and utilities available in live editor scope

    Register the panel

    Add to .storybook/addons.js

    import 'storybook-addon-react-live-edit/dist/register';

    Register the addLiveSource story creator

    Add to .storybook/config.js

    import {setAddon} from '@storybook/react';
    import LiveEdit, {setOptions} from 'storybook-addon-react-live-edit';
     
    setOptions({ theme: 'darcula', presets: ['react'] });
     
    setAddon(LiveEdit);

    Add withLiveEditScope story decorator

    addDecorator to .storybook/config.js

    import {addDecorator} from '@storybook/react';
    import {withLiveEditScope} from 'storybook-addon-react-live-edit';
     
    import ExternalComponent from 'a-apackage';
     
    addDecorator(withLiveEditScope({ ExternalComponent }));

    or

    addDecorator to particular stories

    import {withLiveEditScope} from 'storybook-addon-react-live-edit';
    import ExternalComponent from 'a-apackage';
     
    storiesOf("Demo", module)
      .addDecorator(withLiveEditScope({ React, ExternalComponent }))
      .addLiveSource('demo', `return <div>{scopeTest}</div>`);

    Usage

    When LiveEdit addon is registered with storybooks setAddon function new method addLiveSource to add a story from source provided as a string. This source can be edited in "Live edit" panel

    storiesOf("Demo", module)
      .addLiveSource('demo', `return <div>{scopeTest}</div>`);

    or

    You can use withLiveEdit story creator

    storiesOf("Demo", module)
      .add('demo', withLiveEdit(`return <div>{scopeTest}</div>`));

    API

    addLiveSource

    addLiveSource(name, source[, scope]) 
    
    • name (string, required) - the story name
    • source (string, required) - story source to be rendered in preview and available for editing in "Live edit" panel
    • scope (object, optional) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators.

    withLiveEdit

    withLiveEdit(source[, scope]) 
    
    • source (string, required) - story source to be rendered in preview and available for editing in "Live edit" panel
    • scope (object, optional) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators.

    withLiveEditScope decorator

    withLiveEditScope(scope)
    
    • scope (object, required) - variables provided to rendered story, these can be additional components, utilities or any other data. Scope is merged with all variables previously provided by withLiveEditScope decorators. React should be imported and provided within the scope object.

    Example

    To run provided example execute following command, storybook will run on port 3000

    yarn example

    Install

    npm i kiya-storybook-addon-react-live-edit

    DownloadsWeekly Downloads

    1

    Version

    2.0.5

    License

    MIT

    Unpacked Size

    207 kB

    Total Files

    32

    Last publish

    Collaborators

    • kiyad