Handling an event on plugin visibility change

[aleybovich]

I need to be able to control document explorer plugin visibility via a url. Also, I need to update the url when the document explorer is opened or closed (similar to onTabChange functionality when a tab is selected). Is there a way to capture an event when I click on doc explorer icon to expand/collapse it?

I create GraphiQL instance like this:

ReactDOM.render(
      React.createElement(GraphiQL, {
        fetcher: fetcher,
        query: parameters.query,
        variables: parameters.variables,
        headers: parameters.headers,
        defaultHeaders: parameters.defaultHeaders,
        onEditQuery,
        onEditVariables,
        onEditHeaders,
        onTabChange,
        defaultEditorToolsVisibility: true,
        isHeadersEditorEnabled: true,
        shouldPersistHeaders: true,
        //visiblePlugin: "Documentation Explorer"
      }),
      document.getElementById('graphiql'),
    );

[aleybovich]

Turns out there is an event:

    function onTogglePluginVisibility(plugin) {
      if (plugin == null) {
        parameters.de = ""
      } else if (plugin.title == 'Documentation Explorer') {
        parameters.de = "visible"
      }
      updateURL();
    }