How to injectComponents together with default components?

[felixerdy]

I'd like to customize the SidePanel and add an additional tab, besides the default ones (Layer, Filter, Interactions, Basemap).

I created a CustomSidePanelFactory.js

import { Icons, SidePanelFactory } from "@kepler.gl/components";

function CustomSidePanelFactory(...args) {
  const CustomSidePanel = SidePanelFactory(...args);

  const CustomSidePanelWrapper = (props) => {
    return (
      <CustomSidePanel
        {...props}
        panels={[
          {
            id: "rocket",
            label: "Rocket",
            iconComponent: Icons.Rocket,
            component: () => <div className="rocket-panel">Rocket</div>,
          },
          // add default panels here
        ]}
      />
    );
  };

  return CustomSidePanelWrapper;
}
CustomSidePanelFactory.deps = SidePanelFactory.deps;

export default CustomSidePanelFactory;

And use it with injectComponents

const KeplerGl = injectComponents([
  [SidePanelFactory, CustomSidePanelFactory],
]);

How can I have my Rocket panel together with the default panels?

[felixerdy]

I just found out by myself, but I was wondering if there is a general approach regarding using custom and default components together

import { Icons, SidePanelFactory } from "@kepler.gl/components";

function CustomSidePanelFactory(...args) {
  const CustomSidePanel = SidePanelFactory(...args);

  const CustomSidePanelWrapper = (props) => {
    return (
      <CustomSidePanel
        {...props}
        panels={[
          {
            id: "rocket",
            label: "Rocket",
            iconComponent: Icons.Rocket,
            component: () => <div className="rocket-panel">Rocket</div>,
          },
          ...CustomSidePanel.defaultPanels,
        ]}
      />
    );
  };

  return CustomSidePanelWrapper;
}
CustomSidePanelFactory.deps = SidePanelFactory.deps;

export default CustomSidePanelFactory;