Export HighchartsReactRefObject and HighchartsReactProps types, updat…

…ed README.
highcharts · Aug 31, 2023 · 774c47b · 774c47b
1 parent c24b667
commit 774c47b
Show file tree

Hide file tree

Showing 4 changed files with 228 additions and 214 deletions.
diff --git a/README.md b/README.md
@@ -115,10 +115,6 @@ const options: Highcharts.Options = {
     }]
 };
 
-// React supports function components as a simple way to write components that
-// only contain a render method without any state (the App component in this
-// example).
-
 const App = (props: HighchartsReact.Props) => {
   const chartComponentRef = useRef<HighchartsReact.RefObject>(null);
 
@@ -135,6 +131,12 @@ const App = (props: HighchartsReact.Props) => {
 ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
+Since version 3.2.1 it is also possible to import types for `props` and `ref` independently:
+
+```tsx
+import HighchartsReact, { HighchartsReactRefObject, HighchartsReactProps } from 'highcharts-react-official';
+```
+
 ### Highcharts with NextJS
 
 Next.js executes code twice - on server-side and then client-side. First run is done in an environment that lacks `window` and causes Highcharts to be loaded, but not initialized. Easy fix is to place all modules inits in a `if` checking if Highcharts is an object or a function. It should be an object for modules initialization to work without any errors, so code like below is an easy fix:

diff --git a/dist/highcharts-react.d.ts b/dist/highcharts-react.d.ts
@@ -9,82 +9,86 @@ import * as Highcharts from 'highcharts';
  * Highcharts component for React
  */
 declare const HighchartsReact: React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<HighchartsReact.Props> &
-    React.RefAttributes<HighchartsReact.RefObject>
+  React.PropsWithoutRef<HighchartsReactProps> &
+    React.RefAttributes<HighchartsReactRefObject>
 >;
 
+interface HighchartsReactRefObject {
+  chart: Highcharts.Chart;
+
+  /**
+   * React reference
+   */
+  container: React.RefObject<HTMLDivElement>;
+}
+
+interface HighchartsReactProps {
+  /* *
+   *
+   *  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;
+}
+
 declare namespace HighchartsReact {
   /**
    * Properties for a HighchartsReact component
    */
-   interface RefObject {
-    chart: Highcharts.Chart;
-
-    /**
-     * React reference
-     */
-    container: React.RefObject<HTMLDivElement>;
-  }
-  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;
-  }
+  interface RefObject extends HighchartsReactRefObject {}
+  interface Props extends HighchartsReactProps {}
 }
 
-export { HighchartsReact };
+export { HighchartsReact, HighchartsReactRefObject, HighchartsReactProps };
 export default HighchartsReact;
diff --git a/dist/highcharts-react.min.d.ts b/dist/highcharts-react.min.d.ts
@@ -9,82 +9,86 @@ import * as Highcharts from 'highcharts';
  * Highcharts component for React
  */
 declare const HighchartsReact: React.ForwardRefExoticComponent<
-  React.PropsWithoutRef<HighchartsReact.Props> &
-    React.RefAttributes<HighchartsReact.RefObject>
+  React.PropsWithoutRef<HighchartsReactProps> &
+    React.RefAttributes<HighchartsReactRefObject>
 >;
 
+interface HighchartsReactRefObject {
+  chart: Highcharts.Chart;
+
+  /**
+   * React reference
+   */
+  container: React.RefObject<HTMLDivElement>;
+}
+
+interface HighchartsReactProps {
+  /* *
+   *
+   *  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;
+}
+
 declare namespace HighchartsReact {
   /**
    * Properties for a HighchartsReact component
    */
-   interface RefObject {
-    chart: Highcharts.Chart;
-
-    /**
-     * React reference
-     */
-    container: React.RefObject<HTMLDivElement>;
-  }
-  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;
-  }
+  interface RefObject extends HighchartsReactRefObject {}
+  interface Props extends HighchartsReactProps {}
 }
 
-export { HighchartsReact };
+export { HighchartsReact, HighchartsReactRefObject, HighchartsReactProps };
 export default HighchartsReact;