Getting Started

Install React Buddy plugin through the marketplace:

Setting up the preview and palette

Most features of the plugin work on any React projects (preact also supported).

Component preview and palette functionality require additional changes. The plugin can assist with the setup process. Use the Configure link in React Palette tool window:

Or try to run a component preview:

The plugin will show a configuration dialog:

Manual configuration

• add "@react-buddy/ide-toolbox": "^2.3.1" dependency
• wrap your App root into <DevSupport>

ReactDOM.render(
  <React.StrictMode>
    <DevSupport
      ComponentPreviews={<ComponentPreviews />}
      useInitialHook={useInitial}
    >
      <App />
    </DevSupport>
  </React.StrictMode>,
  document.getElementById('root')
);

in order to preview components which use global context, place DevSupport inside all global providers, e.g:

<React.StrictMode>
    <BrowserRouter>
      <GraphQLClientProvider>
        <SecurityProvider>
          <I18nProvider>
            <ServerErrorInterceptor serverErrorEmitter={serverErrorEmitter}>
              <DevSupport // <---
                ComponentPreviews={ComponentPreviews}
                useInitialHook={useInitial}
              >
                <AppErrorBoundary>
                  <App />
                </AppErrorBoundary>
              </DevSupport>
            </ServerErrorInterceptor>
          </I18nProvider>
        </SecurityProvider>
      </GraphQLClientProvider>
    </BrowserRouter>
  </React.StrictMode>,

• copy contents of dev directory from the showcase project