highcharts-react-official - npm Package Compare versions

Comparing version 2.2.2 to 3.0.0

CHANGELOG.md

@@ -5,2 +5,20 @@ # Change Log
 
+<a name="3.0.0"></a>
+# [3.0.0](https://github.com/highcharts/highcharts-react/compare/v2.2.2...v3.0.0) (2020-02-17)
+
+
+### Features
+
+* increase React peer dependency to v16.8.0 ([030ac4e](https://github.com/highcharts/highcharts-react/commit/030ac4e))
+* refactor component with React Hooks ([c8b1e55](https://github.com/highcharts/highcharts-react/commit/c8b1e55))
+* refactor tests ([634a7e7](https://github.com/highcharts/highcharts-react/commit/25f5ecb))
+
+
+### BREAKING CHANGES
+
+* To upgrade, run `yarn add react@^16.8.0 react-dom@^16.8.0` or `npm install --save react@^16.8.0 react-dom@^16.8.0`.
+If you're using `react-test-renderer`, you'll need to bump it to `^16.8.0` as well.
+
+
+
 <a name="2.2.2"></a>
@@ -7,0 +25,0 @@ ## [2.2.2](https://github.com/highcharts/highcharts-react/compare/v2.2.1...v2.2.2) (2019-06-07)

demo/components/Chart.jsx

@@ -0,0 +0,0 @@ import React from 'react'

demo/components/Container.jsx

@@ -0,0 +0,0 @@ import React from 'react'

demo/components/Map.jsx

@@ -0,0 +0,0 @@ import React from 'react'

demo/components/Stock.jsx

@@ -0,0 +0,0 @@ import React from 'react'

demo/demo.jsx

@@ -0,0 +0,0 @@ import React from 'react'

dist/highcharts-react.d.ts

@@ -5,4 +5,4 @@ /*
 
-import * as React from "react";
-import * as Highcharts from "highcharts";
+import * as React from 'react';
+import * as Highcharts from 'highcharts';
 
@@ -12,8 +12,25 @@ /**
  */
-declare class HighchartsReact
-    extends React.PureComponent<HighchartsReact.Props> {
+declare const HighchartsReact: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<HighchartsReact.Props> &
+    React.RefAttributes<{
+      /**
+       * Chart reference
+       */
+      chart: Highcharts.Chart;
 
+      /**
+       * React reference
+       */
+      container: React.RefObject<HTMLDivElement>;
+    }>
+>;
+
+declare namespace HighchartsReact {
+  /**
+   * Properties for a Highcharts component
+   */
+  interface Props {
     /* *
      *
-     *  Constructor
+     *  Properties
      *
@@ -23,124 +40,55 @@ * */
     /**
-     * Creates a new Highcharts component.
-     *
-     * @param props
-     *        Optional React props
+     * Indexer for custom properties
      */
-    constructor(props: HighchartsReact.Props);
+    [key: string]: any;
 
-    /* *
-     *
-     *  Properties
-     *
-     * */
-
     /**
-     * Chart reference
+     * Flag for `Chart.update` call (Default: true)
      */
-    public readonly chart: Highcharts.Chart;
+    allowChartUpdate?: boolean;
 
     /**
-     * React reference
+     * Reference to the chart factory (Default: chart)
      */
-    public readonly container: React.RefObject<HTMLDivElement>;
+    constructorType?: keyof typeof Highcharts;
 
-    /* *
-     *
-     *  Functions
-     *
-     * */
-
     /**
-     * Creates the chart.
+     * Properties of the chart container
      */
-    _createChart(props: HighchartsReact.Props): void;
+    containerProps?: { [key: string]: any };
 
     /**
-     * Creates the chart.
+     * Highcharts namespace
      */
-    componentDidMount(): void;
+    highcharts?: typeof Highcharts;
 
     /**
-     * Updates (or recreates with immutable on) the chart. Can be turned off in the optional React props.
+     * Immutably recreates the chart on receiving new props
      */
-    componentDidUpdate(): void;
+    immutable?: boolean;
 
     /**
-     * Destroys the chart right before the component gets destroyed.
+     * Highcharts options
      */
-    componentWillUnmount(): void;
+    options?: Highcharts.Options;
 
     /**
-     * Places the chart into the React container.
+     * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
+     * [true, true, true])
      */
-    render(): React.ReactNode;
-}
+    updateArgs?: [boolean] | [boolean, boolean] | [boolean, boolean, boolean];
 
-declare namespace HighchartsReact {
+    /* *
+     *
+     *  Functions
+     *
+     * */
 
     /**
-     * Properties for a Highcharts component
+     * Callback for the chart factory
      */
-    interface Props {
-
-        /* *
-        *
-        *  Properties
-        *
-        * */
-
-        /**
-         * Indexer for custom properties
-         */
-        [key: string]: any;
-
-        /**
-         * Flag for `Chart.update` call (Default: true)
-         */
-        allowChartUpdate?: boolean;
-
-        /**
-         * Reference to the chart factory (Default: chart)
-         */
-        constructorType?: keyof typeof Highcharts;
-
-        /**
-         * Properties of the chart container
-         */
-        containerProps?: { [key: string]: any}
-
-        /**
-         * Highcharts namespace
-         */
-        highcharts?: typeof Highcharts;
-
-        /**
-         * Immutably recreates the chart on receiving new props
-         */
-        immutable?: boolean;
-
-        /**
-         * Highcharts options
-         */
-        options?: Highcharts.Options;
-
-        /**
-         * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
-         * [true, true, true])
-         */
-        updateArgs?: ([boolean] | [boolean, boolean] | [boolean, boolean, boolean]);
-
-        /* *
-        *
-        *  Functions
-        *
-        * */
-
-        /**
-         * Callback for the chart factory
-         */
-        callback?: Highcharts.ChartCallbackFunction;
-    }
+    callback?: Highcharts.ChartCallbackFunction;
+  }
 }
 
 export default HighchartsReact;

dist/highcharts-react.js

@@ -78,52 +78,36 @@ (function webpackUniversalModuleDefinition(root, factory) {
 /* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
+Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react__ = __webpack_require__(1);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_react___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_react__);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_highcharts__ = __webpack_require__(2);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1_highcharts___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_1_highcharts__);
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-var _react = __webpack_require__(1);
 
-var _react2 = _interopRequireDefault(_react);
+ // React currently throws a warning when using `useLayoutEffect` on the server.
+// To get around it, we can conditionally `useEffect` on the server (no-op) and
+// `useLayoutEffect` in the browser. We need `useLayoutEffect` to ensure the
+// `Highcharts` ref is available in the layout phase. This makes it available
+// in a parent component's `componentDidMount`.
 
-var _highcharts = __webpack_require__(2);
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? __WEBPACK_IMPORTED_MODULE_0_react__["useLayoutEffect"] : __WEBPACK_IMPORTED_MODULE_0_react__["useEffect"];
+var HighchartsReact = Object(__WEBPACK_IMPORTED_MODULE_0_react__["forwardRef"])(function HighchartsReact(props, ref) {
+  var containerRef = Object(__WEBPACK_IMPORTED_MODULE_0_react__["useRef"])();
+  var chartRef = Object(__WEBPACK_IMPORTED_MODULE_0_react__["useRef"])();
+  useIsomorphicLayoutEffect(function () {
+    function createChart() {
+      var H = props.highcharts || __WEBPACK_IMPORTED_MODULE_1_highcharts___default.a;
+      var constructorType = props.constructorType || 'chart';
 
-var _highcharts2 = _interopRequireDefault(_highcharts);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-var HighchartsReact = function (_React$PureComponent) {
-  _inherits(HighchartsReact, _React$PureComponent);
-
-  function HighchartsReact(props) {
-    _classCallCheck(this, HighchartsReact);
-
-    var _this = _possibleConstructorReturn(this, (HighchartsReact.__proto__ || Object.getPrototypeOf(HighchartsReact)).call(this, props));
-
-    _this.container = _react2.default.createRef();
-    return _this;
-  }
-
-  _createClass(HighchartsReact, [{
-    key: "createChart",
-    value: function createChart() {
-      var props = this.props;
-      var H = props.highcharts || _highcharts2.default;
-      var constructorType = props.constructorType || "chart";
-
       if (!H) {
@@ -137,46 +121,44 @@ console.warn('The "highcharts" property was not passed.');
         // Create a chart
-        this.chart = H[constructorType](this.container.current, props.options, props.callback ? props.callback : undefined);
+        chartRef.current = H[constructorType](containerRef.current, props.options, props.callback ? props.callback : undefined);
       }
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.createChart();
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var props = this.props;
 
+    if (!chartRef.current) {
+      createChart();
+    } else {
       if (props.allowChartUpdate !== false) {
-        if (!props.immutable && this.chart) {
-          var _chart;
+        if (!props.immutable && chartRef.current) {
+          var _chartRef$current;
 
-          (_chart = this.chart).update.apply(_chart, [props.options].concat(_toConsumableArray(props.updateArgs || [true, true])));
+          (_chartRef$current = chartRef.current).update.apply(_chartRef$current, [props.options].concat(_toConsumableArray(props.updateArgs || [true, true])));
         } else {
-          this.createChart();
+          createChart();
         }
       }
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      // Destroy chart
-      if (this.chart) {
-        this.chart.destroy();
-        this.chart = null;
+  });
+  useIsomorphicLayoutEffect(function () {
+    return function () {
+      // Destroy chart only if unmounting.
+      if (chartRef.current) {
+        chartRef.current.destroy();
+        chartRef.current = null;
       }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      // Create container for the chart
-      return _react2.default.createElement("div", _extends({}, this.props.containerProps, { ref: this.container }));
-    }
-  }]);
+    };
+  }, []);
+  Object(__WEBPACK_IMPORTED_MODULE_0_react__["useImperativeHandle"])(ref, function () {
+    return {
+      get chart() {
+        return chartRef.current;
+      },
 
-  return HighchartsReact;
-}(_react2.default.PureComponent);
+      container: containerRef
+    };
+  }, []); // Create container for the chart
 
-exports.default = HighchartsReact;
+  return __WEBPACK_IMPORTED_MODULE_0_react___default.a.createElement("div", _extends({}, props.containerProps, {
+    ref: containerRef
+  }));
+});
+/* harmony default export */ __webpack_exports__["default"] = (Object(__WEBPACK_IMPORTED_MODULE_0_react__["memo"])(HighchartsReact));
 
@@ -183,0 +165,0 @@ /***/ }),

dist/highcharts-react.min.d.ts

@@ -5,4 +5,4 @@ /*
 
-import * as React from "react";
-import * as Highcharts from "highcharts";
+import * as React from 'react';
+import * as Highcharts from 'highcharts';
 
@@ -12,8 +12,25 @@ /**
  */
-declare class HighchartsReact
-    extends React.PureComponent<HighchartsReact.Props> {
+declare const HighchartsReact: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<HighchartsReact.Props> &
+    React.RefAttributes<{
+      /**
+       * Chart reference
+       */
+      chart: Highcharts.Chart;
 
+      /**
+       * React reference
+       */
+      container: React.RefObject<HTMLDivElement>;
+    }>
+>;
+
+declare namespace HighchartsReact {
+  /**
+   * Properties for a Highcharts component
+   */
+  interface Props {
     /* *
      *
-     *  Constructor
+     *  Properties
      *
@@ -23,124 +40,55 @@ * */
     /**
-     * Creates a new Highcharts component.
-     *
-     * @param props
-     *        Optional React props
+     * Indexer for custom properties
      */
-    constructor(props: HighchartsReact.Props);
+    [key: string]: any;
 
-    /* *
-     *
-     *  Properties
-     *
-     * */
-
     /**
-     * Chart reference
+     * Flag for `Chart.update` call (Default: true)
      */
-    public readonly chart: Highcharts.Chart;
+    allowChartUpdate?: boolean;
 
     /**
-     * React reference
+     * Reference to the chart factory (Default: chart)
      */
-    public readonly container: React.RefObject<HTMLDivElement>;
+    constructorType?: keyof typeof Highcharts;
 
-    /* *
-     *
-     *  Functions
-     *
-     * */
-
     /**
-     * Creates the chart.
+     * Properties of the chart container
      */
-    _createChart(props: HighchartsReact.Props): void;
+    containerProps?: { [key: string]: any };
 
     /**
-     * Creates the chart.
+     * Highcharts namespace
      */
-    componentDidMount(): void;
+    highcharts?: typeof Highcharts;
 
     /**
-     * Updates (or recreates with immutable on) the chart. Can be turned off in the optional React props.
+     * Immutably recreates the chart on receiving new props
      */
-    componentDidUpdate(): void;
+    immutable?: boolean;
 
     /**
-     * Destroys the chart right before the component gets destroyed.
+     * Highcharts options
      */
-    componentWillUnmount(): void;
+    options?: Highcharts.Options;
 
     /**
-     * Places the chart into the React container.
+     * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
+     * [true, true, true])
      */
-    render(): React.ReactNode;
-}
+    updateArgs?: [boolean] | [boolean, boolean] | [boolean, boolean, boolean];
 
-declare namespace HighchartsReact {
+    /* *
+     *
+     *  Functions
+     *
+     * */
 
     /**
-     * Properties for a Highcharts component
+     * Callback for the chart factory
      */
-    interface Props {
-
-        /* *
-        *
-        *  Properties
-        *
-        * */
-
-        /**
-         * Indexer for custom properties
-         */
-        [key: string]: any;
-
-        /**
-         * Flag for `Chart.update` call (Default: true)
-         */
-        allowChartUpdate?: boolean;
-
-        /**
-         * Reference to the chart factory (Default: chart)
-         */
-        constructorType?: keyof typeof Highcharts;
-
-        /**
-         * Properties of the chart container
-         */
-        containerProps?: { [key: string]: any}
-
-        /**
-         * Highcharts namespace
-         */
-        highcharts?: typeof Highcharts;
-
-        /**
-         * Immutably recreates the chart on receiving new props
-         */
-        immutable?: boolean;
-
-        /**
-         * Highcharts options
-         */
-        options?: Highcharts.Options;
-
-        /**
-         * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
-         * [true, true, true])
-         */
-        updateArgs?: ([boolean] | [boolean, boolean] | [boolean, boolean, boolean]);
-
-        /* *
-        *
-        *  Functions
-        *
-        * */
-
-        /**
-         * Callback for the chart factory
-         */
-        callback?: Highcharts.ChartCallbackFunction;
-    }
+    callback?: Highcharts.ChartCallbackFunction;
+  }
 }
 
 export default HighchartsReact;

dist/highcharts-react.min.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("highcharts")):"function"==typeof define&&define.amd?define(["react","highcharts"],t):"object"==typeof exports?exports.HighchartsReact=t(require("react"),require("highcharts")):e.HighchartsReact=t(e.React,e.Highcharts)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function o(e){if(Array.isArray(e)){for(var t=0,r=Array(e.length);t<e.length;t++)r[t]=e[t];return r}return Array.from(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},s=function(){function e(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,r,n){return r&&e(t.prototype,r),n&&e(t,n),t}}(),f=r(1),p=n(f),l=r(2),h=n(l),y=function(e){function t(e){a(this,t);var r=i(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e));return r.container=p.default.createRef(),r}return c(t,e),s(t,[{key:"createChart",value:function(){var e=this.props,t=e.highcharts||h.default,r=e.constructorType||"chart";t?t[r]?e.options?this.chart=t[r](this.container.current,e.options,e.callback?e.callback:void 0):console.warn('The "options" property was not passed.'):console.warn('The "constructorType" property is incorrect or some required module is not imported.'):console.warn('The "highcharts" property was not passed.')}},{key:"componentDidMount",value:function(){this.createChart()}},{key:"componentDidUpdate",value:function(){var e=this.props;if(!1!==e.allowChartUpdate)if(!e.immutable&&this.chart){var t;(t=this.chart).update.apply(t,[e.options].concat(o(e.updateArgs||[!0,!0])))}else this.createChart()}},{key:"componentWillUnmount",value:function(){this.chart&&(this.chart.destroy(),this.chart=null)}},{key:"render",value:function(){return p.default.createElement("div",u({},this.props.containerProps,{ref:this.container}))}}]),t}(p.default.PureComponent);t.default=y},function(t,r){t.exports=e},function(e,r){e.exports=t}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("highcharts")):"function"==typeof define&&define.amd?define(["react","highcharts"],t):"object"==typeof exports?exports.HighchartsReact=t(require("react"),require("highcharts")):e.HighchartsReact=t(e.React,e.Highcharts)}("undefined"!=typeof self?self:this,function(e,t){return function(e){function t(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var r={};return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:n})},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=0)}([function(e,t,r){"use strict";function n(){return n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},n.apply(this,arguments)}function o(e){return i(e)||u(e)||c()}function c(){throw new TypeError("Invalid attempt to spread non-iterable instance")}function u(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}function i(e){if(Array.isArray(e)){for(var t=0,r=new Array(e.length);t<e.length;t++)r[t]=e[t];return r}}Object.defineProperty(t,"__esModule",{value:!0});var a=r(1),s=r.n(a),f=r(2),p=r.n(f),l="undefined"!=typeof window?a.useLayoutEffect:a.useEffect,d=Object(a.forwardRef)(function(e,t){var r=Object(a.useRef)(),c=Object(a.useRef)();return l(function(){function t(){var t=e.highcharts||p.a,n=e.constructorType||"chart";t?t[n]?e.options?c.current=t[n](r.current,e.options,e.callback?e.callback:void 0):console.warn('The "options" property was not passed.'):console.warn('The "constructorType" property is incorrect or some required module is not imported.'):console.warn('The "highcharts" property was not passed.')}if(c.current){if(!1!==e.allowChartUpdate)if(!e.immutable&&c.current){var n;(n=c.current).update.apply(n,[e.options].concat(o(e.updateArgs||[!0,!0])))}else t()}else t()}),l(function(){return function(){c.current&&(c.current.destroy(),c.current=null)}},[]),Object(a.useImperativeHandle)(t,function(){return{get chart(){return c.current},container:r}},[]),s.a.createElement("div",n({},e.containerProps,{ref:r}))});t.default=Object(a.memo)(d)},function(t,r){t.exports=e},function(e,r){e.exports=t}])});
 //# sourceMappingURL=highcharts-react.min.js.map

index.js

 module.exports = require('./src/HighchartsReact.js')

package.json

 {
   "name": "highcharts-react-official",
-  "version": "2.2.2",
+  "version": "3.0.0",
   "main": "./dist/highcharts-react.min.js",
   "types": "./dist/highcharts-react.min.d.ts",
-  "license": "SEE LICENSE IN <LICENSE>",
+  "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -18,3 +18,3 @@ "type": "git",
   "scripts": {
-    "test": "babel-tape-runner ./tests/*.node.js & browserify ./tests/chartRender.browser.js ./tests/testingEnvironment.browser.js -t [ babelify --presets [ env react ] ] | tape-run",
+    "test": "jest",
     "build-demo": "browserify ./demo/demo.jsx -o ./demo/bundle.js -t [ babelify --presets [ env react ] ]",
@@ -24,34 +24,40 @@ "build": "webpack --config webpack.config.js",
   },
+  "jest": {
+    "setupFilesAfterEnv": [
+      "./tests/setupTests.js"
+    ]
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
   "peerDependencies": {
-    "highcharts": ">=5.0.0",
-    "react": ">=16.0"
+    "highcharts": ">=6.0.0",
+    "react": ">=16.8.0"
   },
   "husky": {
     "hooks": {
-      "pre-commit": "npm run test && npm run build && git add ."
+      "pre-commit": "npm run test && npm run build"
     }
   },
   "devDependencies": {
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.5",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-tape-runner": "^2.0.1",
-    "babelify": "^7.3.0",
+    "@babel/core": "^7.8.4",
+    "@babel/preset-env": "^7.8.4",
+    "@babel/preset-react": "^7.8.3",
+    "babel-loader": "^8.0.6",
+    "babelify": "^10.0.0",
     "browserify": "^14.3.0",
-    "extend-tape": "^1.2.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
+    "eslint": "^6.8.0",
+    "eslint-plugin-react": "^7.18.3",
     "highcharts": "^6.0.0",
     "husky": "^2.4.0",
-    "react": "^16.4.0",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.4.0",
-    "react-test-renderer": "^16.4.0",
-    "react-unit": "^3.0.0",
+    "jest": "^25.1.0",
+    "react": "^16.9.0",
+    "react-dom": "^16.9.0",
+    "react-test-renderer": "^16.9.0",
     "standard": "^10.0.2",
     "standard-version": "^4.4.0",
-    "tape": "^4.9.1",
-    "tape-run": "^3.0.0",
     "webpack": "^3.12.0"
   }
 }

README.md

@@ -32,9 +32,20 @@ # Highcharts React
 
-* node 8.11.3+
-* npm 6.4.1+ or similar package manager
-* React 16.4+
+* `node` 8.11.3+
+* `npm` 6.4.1+ or similar package manager
 
+This wrapper also requires highcharts and react packages with the following versions installed in your project:
+
+For version **2.x.x** :
+
+* `react` 16.4+
+* `highcharts` 5.0.0+
+
+For version **3.x.x** :
+
+* `react` 16.8+
+* `highcharts` 6.0.0+
+
 ### Installing
 
-Get package from NPM in your React app:
+Get the package from NPM in your React app:
 
@@ -45,2 +56,8 @@ ```bash
 
+If Highcharts is not already installed, get the package with Highcharts:
+
+```bash
+npm install highcharts highcharts-react-official
+```
+
 ### Using
@@ -139,4 +156,6 @@
 
-Live example: https://stackblitz.com/edit/react-hketvd?file=index.js
+**Live example:** https://stackblitz.com/edit/react-hketvd?file=index.js
 
+**Optimal way to update with React Hooks:** https://stackblitz.com/edit/react-nwseym?file=index.js
+
 ```jsx
@@ -143,0 +162,0 @@ import React, { Component } from 'react';

src/HighchartsReact.d.ts

@@ -5,4 +5,4 @@ /*
 
-import * as React from "react";
-import * as Highcharts from "highcharts";
+import * as React from 'react';
+import * as Highcharts from 'highcharts';
 
@@ -12,8 +12,25 @@ /**
  */
-declare class HighchartsReact
-    extends React.PureComponent<HighchartsReact.Props> {
+declare const HighchartsReact: React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<HighchartsReact.Props> &
+    React.RefAttributes<{
+      /**
+       * Chart reference
+       */
+      chart: Highcharts.Chart;
 
+      /**
+       * React reference
+       */
+      container: React.RefObject<HTMLDivElement>;
+    }>
+>;
+
+declare namespace HighchartsReact {
+  /**
+   * Properties for a Highcharts component
+   */
+  interface Props {
     /* *
      *
-     *  Constructor
+     *  Properties
      *
@@ -23,124 +40,55 @@ * */
     /**
-     * Creates a new Highcharts component.
-     *
-     * @param props
-     *        Optional React props
+     * Indexer for custom properties
      */
-    constructor(props: HighchartsReact.Props);
+    [key: string]: any;
 
-    /* *
-     *
-     *  Properties
-     *
-     * */
-
     /**
-     * Chart reference
+     * Flag for `Chart.update` call (Default: true)
      */
-    public readonly chart: Highcharts.Chart;
+    allowChartUpdate?: boolean;
 
     /**
-     * React reference
+     * Reference to the chart factory (Default: chart)
      */
-    public readonly container: React.RefObject<HTMLDivElement>;
+    constructorType?: keyof typeof Highcharts;
 
-    /* *
-     *
-     *  Functions
-     *
-     * */
-
     /**
-     * Creates the chart.
+     * Properties of the chart container
      */
-    _createChart(props: HighchartsReact.Props): void;
+    containerProps?: { [key: string]: any };
 
     /**
-     * Creates the chart.
+     * Highcharts namespace
      */
-    componentDidMount(): void;
+    highcharts?: typeof Highcharts;
 
     /**
-     * Updates (or recreates with immutable on) the chart. Can be turned off in the optional React props.
+     * Immutably recreates the chart on receiving new props
      */
-    componentDidUpdate(): void;
+    immutable?: boolean;
 
     /**
-     * Destroys the chart right before the component gets destroyed.
+     * Highcharts options
      */
-    componentWillUnmount(): void;
+    options?: Highcharts.Options;
 
     /**
-     * Places the chart into the React container.
+     * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
+     * [true, true, true])
      */
-    render(): React.ReactNode;
-}
+    updateArgs?: [boolean] | [boolean, boolean] | [boolean, boolean, boolean];
 
-declare namespace HighchartsReact {
+    /* *
+     *
+     *  Functions
+     *
+     * */
 
     /**
-     * Properties for a Highcharts component
+     * Callback for the chart factory
      */
-    interface Props {
-
-        /* *
-        *
-        *  Properties
-        *
-        * */
-
-        /**
-         * Indexer for custom properties
-         */
-        [key: string]: any;
-
-        /**
-         * Flag for `Chart.update` call (Default: true)
-         */
-        allowChartUpdate?: boolean;
-
-        /**
-         * Reference to the chart factory (Default: chart)
-         */
-        constructorType?: keyof typeof Highcharts;
-
-        /**
-         * Properties of the chart container
-         */
-        containerProps?: { [key: string]: any}
-
-        /**
-         * Highcharts namespace
-         */
-        highcharts?: typeof Highcharts;
-
-        /**
-         * Immutably recreates the chart on receiving new props
-         */
-        immutable?: boolean;
-
-        /**
-         * Highcharts options
-         */
-        options?: Highcharts.Options;
-
-        /**
-         * Flags for `Chart.update` call: redraw, oneToOne, and animation. (Default:
-         * [true, true, true])
-         */
-        updateArgs?: ([boolean] | [boolean, boolean] | [boolean, boolean, boolean]);
-
-        /* *
-        *
-        *  Functions
-        *
-        * */
-
-        /**
-         * Callback for the chart factory
-         */
-        callback?: Highcharts.ChartCallbackFunction;
-    }
+    callback?: Highcharts.ChartCallbackFunction;
+  }
 }
 
 export default HighchartsReact;

src/HighchartsReact.js

@@ -1,66 +0,93 @@
-import React from "react";
-import Highcharts from "highcharts";
+import React, {
+  forwardRef,
+  memo,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef
+} from 'react';
 
-export default class HighchartsReact extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.container = React.createRef();
-  }
+import Highcharts from 'highcharts';
 
-  createChart() {
-    const props = this.props;
-    const H = props.highcharts || Highcharts;
-    const constructorType = props.constructorType || "chart";
+// React currently throws a warning when using `useLayoutEffect` on the server.
+// To get around it, we can conditionally `useEffect` on the server (no-op) and
+// `useLayoutEffect` in the browser. We need `useLayoutEffect` to ensure the
+// `Highcharts` ref is available in the layout phase. This makes it available
+// in a parent component's `componentDidMount`.
+const useIsomorphicLayoutEffect =
+  typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-    if (!H) {
-      console.warn('The "highcharts" property was not passed.');
-    } else if (!H[constructorType]) {
-      console.warn('The "constructorType" property is incorrect or some ' +
-        'required module is not imported.');
-    } else if (!props.options) {
-      console.warn('The "options" property was not passed.');
-    } else {
-      // Create a chart
-      this.chart = H[constructorType](
-        this.container.current,
-        props.options,
-        props.callback ? props.callback : undefined
-      );
-    }
-  }
+const HighchartsReact = forwardRef(
+  function HighchartsReact(props, ref) {
+    const containerRef = useRef();
+    const chartRef = useRef();
 
-  componentDidMount() {
-    this.createChart();
-  }
+    useIsomorphicLayoutEffect(() => {
+      function createChart() {
+        const H = props.highcharts || Highcharts;
+        const constructorType = props.constructorType || 'chart';
 
-  componentDidUpdate() {
-    const props = this.props;
+        if (!H) {
+          console.warn('The "highcharts" property was not passed.');
 
-    if (props.allowChartUpdate !== false) {
-      if (!props.immutable && this.chart) {
-        this.chart.update(
-          props.options,
-          ...(props.updateArgs || [true, true])
-        );
+        } else if (!H[constructorType]) {
+          console.warn(
+            'The "constructorType" property is incorrect or some ' +
+              'required module is not imported.'
+          );
+        } else if (!props.options) {
+          console.warn('The "options" property was not passed.');
+
+        } else {
+          // Create a chart
+          chartRef.current = H[constructorType](
+            containerRef.current,
+            props.options,
+            props.callback ? props.callback : undefined
+          );
+        }
+      }
+
+      if (!chartRef.current) {
+        createChart();
       } else {
-        this.createChart();
+        if (props.allowChartUpdate !== false) {
+          if (!props.immutable && chartRef.current) {
+            chartRef.current.update(
+              props.options,
+              ...(props.updateArgs || [true, true])
+            );
+          } else {
+            createChart();
+          }
+        }
       }
-    }
-  }
+    });
 
-  componentWillUnmount() {
-    // Destroy chart
-    if (this.chart) {
-      this.chart.destroy();
-      this.chart = null;
-    }
-  }
+    useIsomorphicLayoutEffect(() => {
+      return () => {
+        // Destroy chart only if unmounting.
+        if (chartRef.current) {
+          chartRef.current.destroy();
+          chartRef.current = null;
+        }
+      };
+    }, []);
 
-  render() {
+    useImperativeHandle(
+      ref,
+      () => ({
+        get chart() {
+          return chartRef.current;
+        },
+        container: containerRef
+      }),
+      []
+    );
+
     // Create container for the chart
-    return React.createElement(
-      "div",
-      { ...this.props.containerProps, ref: this.container }
-    );
+    return <div { ...props.containerProps } ref={ containerRef } />;
   }
-}
+);
+
+export default memo(HighchartsReact);

webpack.config.js

@@ -5,8 +5,7 @@ const webpack = require('webpack');
 
-(function() {
+(function () {
+  const file = fs.readFileSync('src/HighchartsReact.d.ts');
 
-    const file = fs.readFileSync('src/HighchartsReact.d.ts');
-
-    fs.writeFileSync('dist/highcharts-react.d.ts', file);
-    fs.writeFileSync('dist/highcharts-react.min.d.ts', file);
+  fs.writeFileSync('dist/highcharts-react.d.ts', file);
+  fs.writeFileSync('dist/highcharts-react.min.d.ts', file);
 }());
@@ -21,3 +20,3 @@
     filename: '[name].js',
-    sourceMapFilename: "[name].js.map",
+    sourceMapFilename: '[name].js.map',
     library: 'HighchartsReact',
@@ -47,6 +46,3 @@ libraryTarget: 'umd',
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        options: {
-          plugins: ['babel-plugin-transform-object-rest-spread']
-        }
+        loader: 'babel-loader'
       }
@@ -63,2 +59,2 @@ ]
   ]
-}
+};

New alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

227638

1.51%

Dev dependency count

19

-9.52%

Number of package files

36

44%

Lines of code

7074

5.38%

Number of lines in readme file

425

4.68%

No dependency changes