1.0.9 • Published 4 years ago
@freightos/storybook-react-live v1.0.9
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-renderertheme 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
  },
};:)