diff --git a/README.md b/README.md index e6a5fc0..e3d8ab4 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,10 @@ To avoid any additional installs you may just add `data-config="inpage:true"` at > ``` +Also you can toggle React Render Tracker panel with: + - shortcut `Alt + Meta (Command / Win) + T` + - `data-config="isactive:false"` option + ### Option #1 – Using with browser's devtools 1. Install Rempl extension [for Chromium](https://chrome.google.com/webstore/detail/rempl/hcikjlholajopgbgfmmlbmifdfbkijdj) based browser or [for Firefox](https://addons.mozilla.org/en-US/firefox/addon/rempl/) (other browsers might be added later) diff --git a/src/publisher/index.ts b/src/publisher/index.ts index fe3aba9..39f6cd4 100644 --- a/src/publisher/index.ts +++ b/src/publisher/index.ts @@ -7,5 +7,20 @@ import { attach } from "./react-integration"; installReactDevtoolsHook(window, renderer => attach(renderer, recordEvent)); if (config.inpage) { - rempl.getHost().activate(); + const host = rempl.getHost(); + let isActive = config.isactive ?? true + + const toggle = () => { + isActive = !isActive; + isActive ? host.deactivate() : host.activate(); + } + toggle() + + document.addEventListener('keydown', event => { + if (event.metaKey === true && + event.altKey === true && + event.code === 'KeyT') { + toggle() + } + }) }