react-jsx-highmaps/src/components/MapNavigation/MapNavigationButton.js

Highmaps built using React components

import { useEffect } from 'react';
import { useHighcharts, useChart } from 'react-jsx-highcharts';

const MapNavigationButton = props => {
  const Highcharts = useHighcharts();
  const chart = useChart();

  useEffect(() => {
    const { type, ...rest } = props;
    const opts = getMapNavigationButtonConfig(rest, Highcharts);
    updateMapNavigationButton(type, opts, chart);

    return () => {
      // TODO removeButton was missing in original class?
      //const { type } = props;
      //attempt(this.removeButton, type, {});
    };
  }, []);

  return null;
};
const getMapNavigationButtonConfig = (props, Highcharts) => {
  const { children: text, onClick: onclick, ...rest } = props;

  return {
    ...(Highcharts.defaultOptions &&
      Highcharts.defaultOptions.mapNavigation.buttonOptions),
    onclick, // Weird Highcharts inconsistency, onclick instead of events: { click }
    ...rest,
    text
  };
};

const updateMapNavigationButton = (type, config, chart) => {
  const enableButtons = Object.keys(config).length > 0;

  chart.update({
    mapNavigation: {
      enableButtons,
      buttons: {
        [type]: config
      }
    }
  });
};

export default MapNavigationButton;