New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,067
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Storybook react-live decorator
react-live decorator for Storybook 6+ | renders story as react-live with given code
npm install storybook-react-live-decorator
Last updated 7 months ago
2
Downloads per week
Readme View on GitHub

storybook-react-live

react-live decorator for Storybook v6+

npm NPM

Screenshot

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;

:)

Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI