storybook-react-live

react-live decorator for Storybook v6+

Installation

npm i -D @freightos/storybook-react-live

Usage

import withLiveEdit from '@freightos/storybook-react-live';

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

stories.add(
  'Live edit',
  withLiveEdit({
    code,
    scope: { Button }
  })
)

Props of withLiveEdit()

All props accepted by <LiveProvider /> and:

Name	PropType	Description
theme	PropTypes.object	A prism-react-renderer theme object. See more here
editorStyle	PropTypes.object	Styles object for overriding editor styles
errorStyles	PropTypes.object	Styles object for overriding error styles

Extend globally via .storybook/preview.js

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

export const parameters = {
  reactLive: {
    scope: { Button, Icon },
    theme: synthwave84
  },
};

:)