How to use the react-devtools-inline/backend.activate function in react-devtools-inline

To help you get started, we’ve selected a few react-devtools-inline examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github facebook / react / packages / react-devtools-shell / src / devtools.js View on Github external
connect(cb) {
      const DevTools = initializeFrontend(contentWindow);

      // Activate the backend only once the DevTools frontend Store has been initialized.
      // Otherwise the Store may miss important initial tree op codes.
      activateBackend(contentWindow);

      const root = createRoot(container);
      root.render(
        createElement(DevTools, {
          browserTheme: 'light',
          enabledInspectedElementContextMenu: true,
          enabledInspectedElementContextMenuCopy: true,
          showTabBar: true,
          warnIfLegacyBackendDetected: true,
          warnIfUnsupportedVersionDetected: true,
        }),
      );
    },
github bvaughn / react-devtools-tutorial / src / DevTools.js View on Github external
contentWindow.__REACT_DEVTOOLS_TARGET_WINDOW__ = window;

    initializeBackend(contentWindow);

    // Reset preferences between tutorial steps.
    localStorage.removeItem('React::DevTools::componentFilters');

    // This returns a React component that can be rendered into your app.
    // 
    const DevTools = initializeFrontend(contentWindow);

    // Schedule an update with React now that the DevTools UI is ready to be rendered.
    setDevTools(DevTools);

    // Let the backend know it's safe to activate.
    activateBackend(contentWindow);
  }, [iframeRef]);
github bvaughn / faux-codesandbox-client / backend / src / setupReactDevTools.js View on Github external
const listener = ({ data }) => {
  switch (data.type) {
    case 'activate':
      window.removeEventListener('message', listener);

      // Wait for the frontend Store to be ready before initializing the backend.
      // This way the Store doesn't miss any tree operations.
      activate(window);
      break;
    default:
      break;
  }
};
github nscozzaro / physics-is-beautiful / courses / static / courses / js / containers / StudioViews / EditorsViews / containers / LessonWorkSpace / Codesandbox / sandbox-exe / index.js View on Github external
window.addEventListener('message', ({ data }) => {
        switch (data.type) {
          case 'activate':
            activate(window);
            break;
          default:
            break;
        }
      });
    }
github codesandbox / codesandbox-client / packages / app / src / sandbox / index.js View on Github external
window.addEventListener('message', ({ data }) => {
        switch (data.type) {
          case 'activate':
            activate(window);
            break;
          default:
            break;
        }
      });
    }
github bvaughn / react-devtools-tutorial / src / setupDevToolsBackend.js View on Github external
const onMessage = ({ data }) => {
    switch (data.type) {
      case 'activate-backend':
        window.removeEventListener('message', onMessage);
        activate(window);
        break;
      default:
        break;
    }
  };

react-devtools-inline

Embed react-devtools within a website

MIT
Latest version published 20 days ago

Package Health Score

95 / 100
Full package analysis

Similar packages