Need documentation for using with @storybook/react v5

[tabrez96]

How to configure it globally for all stories in config.js using addDecorator while using it with @storybook/react v5+?

I have imported all stories in config.js like this: var stories = require.context('../src', true, /\.stories\.js$/);

[jesus101037]

Same here, i really liked this addon and would like to use it with the Component Story Format (CSF) of Storybook 5.2

[duckscofield]

I hope that this could support with CSF, too.

[KevinVandy]

So I guess this addon is not compatible with the newer versions of storybook? I cannot get it to work. It just always says "Editor Unavailable"

[mojjy]

Managed to get it working by doing the following, an example would be nice though

import React from "react";
import { setOptions, withLiveEdit , withLiveEditScope } from "storybook-addon-react-live-edit";
import {MyComponent} from "somewhere";

setOptions({presets: ['react']});
export default {
    component: MyComponent,
    title: "MyComponent",
    decorators: [_ => withLiveEditScope({React, MyComponent})(_, {React, MyComponent}) ]
}

export const LiveEditComponent = (_) => withLiveEdit("return <MyComponent name={'MyComponent X'} />")(_);

the setOptions({presets: ['react']}) can also be done ./storybook/preview.js

[thoughtworks-tcaceres]

Managed to get it working by doing the following, an example would be nice though

import React from "react";
import { setOptions, withLiveEdit , withLiveEditScope } from "storybook-addon-react-live-edit";
import {MyComponent} from "somewhere";

setOptions({presets: ['react']});
export default {
    component: MyComponent,
    title: "MyComponent",
    decorators: [_ => withLiveEditScope({React, MyComponent})(_, {React, MyComponent}) ]
}

export const LiveEditComponent = (_) => withLiveEdit("return <MyComponent name={'MyComponent X'} />")(_);

the setOptions({presets: ['react']}) can also be done ./storybook/preview.js

Thanks. Do you have a full example by any chance?