https://github.com/sanusart/storybook-react-live-decorator

react-live decorator for Storybook 6+ | renders story as react-live with given code
https://github.com/sanusart/storybook-react-live-decorator

Last synced: 23 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/sanusart/storybook-react-live-decorator
• Owner: sanusart
• License: mit
• Created: 2023-07-30T13:28:48.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-06T18:20:56.000Z (over 1 year ago)
• Last Synced: 2024-11-30T17:49:23.945Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://sanusart.github.io/storybook-react-live-decorator/
• Size: 3.33 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# storybook-react-live

[react-live](https://github.com/FormidableLabs/react-live) decorator for [Storybook](https://storybook.js.org/) v6+

[![npm](https://img.shields.io/npm/v/storybook-react-live-decorator)](https://www.npmjs.com/package/storybook-react-live-decorator)

[![NPM](https://img.shields.io/npm/l/storybook-react-live-decorator)](https://www.npmjs.com/package/storybook-react-live-decorator)

## Screenshot

![Screenshot](https://raw.githubusercontent.com/sanusart/storybook-react-live-decorator/main/images/show.png)

## [Demo](https://sanusart.github.io/storybook-react-live-decorator)

## Installation

`npm i -D storybook-react-live-decorator`

## Usage

```jsx

// Component.stories.js

import { ReactLiveDecorator } from 'storybook-react-live-decorator';

const code = `() => (

  

    

      Default

    

  

)`;

export const LiveEdit = {

    decorators: [ReactLiveDecorator({ code, scope: { Button, Wrapper } })]

};

```

## Props of `ReactLiveDecorator`

All props accepted by [\](https://github.com/FormidableLabs/react-live#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](https://github.com/FormidableLabs/prism-react-renderer#theming)  

| 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`

```js

const preview = {

    parameters: {

        reactLive: {

            theme: themes.dracula, // import from `prism-react-renderer`

            scope: {Button, Wrapper},

            debug: false,

            fontFamily: 'monospace'

        }

    }

};

export default preview;

```

:)