Package Exports

storybook-react-live-decorator
storybook-react-live-decorator/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (storybook-react-live-decorator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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;