Skip to content

react-live decorator for Storybook 6+ | renders story as react-live

License

Notifications You must be signed in to change notification settings

Freightos/storybook-react-live

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

storybook-react-live

react-live decorator for Storybook v6+

npm NPM

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
  },
};

:)