storybook-react-live

react-live decorator for Storybook v6+

Screenshot

Demo

Installation

npm i -D storybook-react-live-decorator

Usage

// Component.stories.js

import { ReactLiveDecorator } from 'storybook-react-live-decorator';

const code = `() => (
  <Wrapper>
    <Button type="primary" size="large">
      Default
    </Button>
  </Wrapper>
)`;

export const LiveEdit = {
    decorators: [ReactLiveDecorator({ code, scope: { Button, Wrapper } })]
};

Props of ReactLiveDecorator

All props accepted by \<LiveProvider /> and:

Name	PropType	Description
code	PropTypes.string	Code string
scope	PropTypes.object	scope object
theme	PropTypes.object	A prism-react-renderer existing theme or theme object. See more here
fontFamily	PropTypes.string	css font-family to use in the edirot default monospace
debug	PropTypes.bool	Logs whatever goes through decorator into console.log

Extend globally via .storybook/preview.js

Add property reactLive to parameters object. Accepts: scope and theme

const preview = {
    parameters: {
        reactLive: {
            theme: themes.dracula, // import from `prism-react-renderer`
            scope: {Button, Wrapper},
            debug: false,
            fontFamily: 'monospace'
        }
    }
};

export default preview;

:)