Function TanStackDevtools

packages/react-devtools/src/devtools.tsx:147–277

({
  plugins,
  config,
  eventBusConfig,
}: TanStackDevtoolsReactInit)

}

export const TanStackDevtools = ({
  plugins,
  config,
  eventBusConfig,
}: TanStackDevtoolsReactInit): ReactElement | null => {
  const devToolRef = useRef<HTMLDivElement>(null)

  const [pluginContainers, setPluginContainers] = useState<
    Record<string, HTMLElement>
  >({})
  const [titleContainers, setTitleContainers] = useState<
    Record<string, HTMLElement>
  >({})
  const [triggerContainer, setTriggerContainer] = useState<HTMLElement | null>(
    null,
  )

  const [PluginComponents, setPluginComponents] = useState<
    Record<string, JSX.Element>
  >({})
  const [TitleComponents, setTitleComponents] = useState<
    Record<string, JSX.Element>
  >({})
  const [TriggerComponent, setTriggerComponent] = useState<JSX.Element | null>(
    null,
  )

  const pluginsMap: Array<TanStackDevtoolsPlugin> = useMemo(
    () =>
      plugins?.map((plugin) => {
        return {
          ...plugin,
          name:
            typeof plugin.name === 'string'
              ? plugin.name
              : (e, props) => {
                  const id = e.getAttribute('id')!
                  const target = e.ownerDocument.getElementById(id)

                  if (target) {
                    setTitleContainers((prev) => ({
                      ...prev,
                      [id]: e,
                    }))
                  }

                  convertRender(
                    plugin.name as PluginRender,
                    setTitleComponents,
                    e,
                    props,
                  )
                },
          render: (e, theme) => {
            const id = e.getAttribute('id')!
            const target = e.ownerDocument.getElementById(id)

            if (target) {